0

I have a menu that needs to pop up when it is hovered over (and collapse when the cursor is moved outside). However, on touch devices I want it to expand and collapse on 'click', since hover events aren't very useful.

To do that, I use :hover selector, and a backup .clicked class that is applied on touch events. The touchstart handler toggles the .clicked class and uses preventDefault to block the default action (which sets the :hover flag).

It works fine in Chrome's mobile simulator, but on my iPhone the menu ends up having both :hover and .clicked. Why is that happening?

Here's a fiddle: http://jsfiddle.net/rgLodhjg/1/

// html
<div class="test">
</div>

// css
.test {
    width: 200px;
    height: 100px;
    border: 1px solid black;
}
.test:hover:before {
    content: "hover";
}
.test.clicked:after {
    content: "clicked";
}

// js
$(".test").on("touchstart", function(e) {
    $(this).toggleClass("clicked");
    e.preventDefault();
    return false;
});
riv
  • 6,846
  • 2
  • 34
  • 63

2 Answers2

0

You can try this and it will work on iOS9 (I'm not sure about iOS8 and older):

@media (hover: hover) {
  .test:hover:before {
    content: "hover";
  }
}

To support older iOS systems you can use mq4-hover-shim.

You can also use the solution provided by @Simon_Weaver in this post.

Community
  • 1
  • 1
max
  • 8,632
  • 3
  • 21
  • 55
0

By default, hovers are activated on first "tap" in safari. Try leaving the default hover functionality and tapping it, the hover behavior should happen.

Alek Hurst
  • 4,527
  • 5
  • 19
  • 24