Prevent :hover on touch in iOS

336
November 22, 2016, at 3:19 PM

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;
});
Answer 1

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.

Answer 2

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

READ ALSO
TinyMCE remove &ldquo;format&rdquo; drop down

TinyMCE remove “format” drop down

How do I remove the "format" drop down button?.

224
I am able to move to my Profile page without login by just changing the url address in Angular Js?

I am able to move to my Profile page without login by just changing the url address in Angular Js?

I am new to angular i am building an login page that will redirect to the User Profile page after successful login but I am able to move to the next page with just changing the url address without any login and by clicking back button i come on my login page [nnn]Here...

145
Add multiple variables into one function

Add multiple variables into one function

I don't know if variables is the right term to use here. [nnn]So, I made a block in Concrete5 to allow hours of certain departments to be listed.

270