Link to home
Start Free TrialLog in
Avatar of Member_2_248744
Member_2_248744Flag for United States of America

asked on

css Mobil :hover alternatives, that work for touch, , focus maybe?

I am trying to convert many web pages to handheld friendly, , that have the old css :hover for menus, info, expands, and other, BUT there is NO HOVER if there is not a mouse cursor in a touch device, I have changed the menu drop-downs from css :hover to javascript onclick or ontouch, but some of the other various :hover, are not so easy, for links <a> I have tried the :focus , but often it goes to the web address, instead of showing additional info in a css pop-up

Can you show me some ways that you have used to do a :hover info-pop-up, or other action with touch only devices?
Any suggestions are welcome, thanks all. . . . . . .
ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Member_2_248744

ASKER

OK, xmediaman, , I have some coding operational confusion about "tap" and "touch", in my android tests if i briefly touch a link then the browser goes to the link addy,  Thanks for the "empty onclick" I will try that out, but so far it does not seem to be a replacement for css :hover especially if there is a onclick ontouch event there.

It is not that the "double touch" is appealing to me or not, I am interested in doing something that is already familiar to handheld users to get "extra" info or slide-outs that I used to do with :hover or onmouseover=
Can you show html-css-javascript code for a Mobil "double touch" that works for you, or any web resources about that?

I Guess I should have said that I can do extra add-on "html"  "stick-outs" for every place that now has the :hover or onmouseover= , But that's so much time consuming work, I am not a beginner at re-Formatting web pages, partially or entirely, , , , , I was hoping you could show me how you converted this type of thing to Mobil touch?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I'm afraid I have no experience that is directly related to info pop-ups. I was tripped up for quite a while trying to get a form label to behave properly because of the iOS tap/touch behavior. Then just last week I was troubleshooting a way for a hover-initiated drop-down menu to work on a mobile device and learned that when I added the empty onclick event, a tap or touch fired the hover pseudo selector and caused the menu to drop-down like hovering did on the desktop version. This is very much like the info pop-up except that your links have two separate behaviors for hover and click. That's why I suggested the info button or question mark link that is visible only on a mobile device. The info button or question mark link could mimic the hover state of the desktop version before touching or tapping to navigate to the remote page.
Thanks for the new info, I guess this is just not something much published on the web, maybe to new of a thing, or maybe not done, except to entirely redesign the elements to add a |?| some where next to the element to touch for info. I have done this, but it requires non-repeatable coding for different elements. I was really hoping to get some already tested methods, so I would not have to blaze the trail and do all of that testing and user response satisfaction crap.

One thing I am not sure of is that the "double touch" is familiar to users, I have never used that on a phone or tablet web-page that I can remember?
Is this something you two have done on a touch thing, that you are "used to using"  (not code, but actually device DT)?  Does not matter if you respond to this, just curious.not

cobol thanks, I looked at the jquery doubletap link you gave, and they just do a standard measure time for touch-click of 250 milliseconds, I already can do that, however, my problem is to try and adjust for and - or prevent any other events that are allocated to that element like an ontouch= , but they do not address that issue, but if there is no other event, then why do a double, just do an ontouch= ?

I will leave this question open for a while, hope to get some suggestions (code), but maybe not goin to happen?
If you have ever seen any examples of code for a mobil added |?| for info display on many different elements, post a link.
Wait is over for me, goin to split de points.
Thanks 4 all de keyboard poking here, I guess de web touch tech coding is still being constructed and fiddled with, so will just have 2 keep lookin 4 touch workable.