Menu
I have some css menus on my site that expand with :hover (without js)
This works in a semi-broken way on iDevices, for example a tap will activate the :hover rule and expand the menu, but then tapping elsewhere doesn't remove the :hover. Also if there is a link inside the element that is :hover'ed, you have to tap twice to activate the link (first tap triggers :hover, second tap triggers link).
I've been able to make things work nicely on iphone by binding the touchstart event.
The problem is that sometimes mobile safari still chooses to trigger the :hover rule from the css instead of my touchstart events!
I know this is the problem because when I disable all the :hover rules manually in the css, mobile safari works great (but regular browsers obviously don't anymore).
Is there a way to dynamically "cancel" :hover rules for certain elements when the user is on mobile safari?
See and compare iOS behavior here: http://jsfiddle.net/74s35/3/ Note: that only some css properties trigger the two-click behavior, e.g. display:none; but not background: red; or text-decoration: underline;
997
The iPhone has a touch screen, so you can't really hover over anything, but the following technique will still work. Instead of hovering, you'll have to click on a given area for the controls to show up.
No, there's no way of doing that on a touch device. There's no way for your iPad to detect your finger is hovering over the its screen :) (Although technically this is perfectly possible, and it could in theory be added to a future iPad model.)
I found that ":hover" is unpredictable in iPhone/iPad Safari. Sometimes tap on element make that element ":hover", while sometimes it drifts to other elements.
For the time being, I just have a "no-touch" class at body.
<body class="yui3-skin-sam no-touch"> ... </body> And have all CSS rules with ":hover" below ".no-touch":
.no-touch my:hover{ color: red; } Somewhere in the page, I have javascript to remove no-touch class from body.
if ('ontouchstart' in document) { Y.one('body').removeClass('no-touch'); } This doesn't look perfect, but it works anyway.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
