Hover effect remains after clicking on jQueryMobile

Question

I am developing a mobile application with jQueryMobile for mobile devices only. I have a search icon. I want to give a hover effect on this icon when the user touches it.

I achieved this css:

<a href="search.html" class="custom_header" > .custom_header:hover { background:url('../images/effect_glow.png') no-repeat center; 

Now the problem is that the hover effect remains after touching. I need behavior like mousein and mouseout. In this case, the effect remains even in the fact that this part does not concern.

How to remove the effect of hovering after the finger comes off it?

Answer 1

You may know this, but :hover does not exist on touch screen devices. Therefore, when you design a responsive website, you should carefully plan when and where to use it: freezing.

While it is implemented on mobile devices, it is extremely buggy, mainly on iOS devices. On the other end, you cannot use :focus , because it can only be used on elements that support focus, so tags and buttons are excluded. Also :active does not go to mobile devices.

In this case, we can use jQuery to fix this problem.

Working example: http://jsfiddle.net/Gajotres/84Nug/

In this example, I used the events vmousedown , vmouseup and vmousecancel , so I can check it on the desktop / mobile devices. Just replace them with touchstart , touchend and touchcancel .

touchcancel / vmousecancel necessary because sometimes the button can remain pressed.

Code:

 $(document).on('pagebeforeshow', '#index', function(){ $(document).on('touchstart','.custom_header' ,function(){ $(".custom_header").css("background","url('http://www.cesarsway.com/sites/default/files/cesarsway-images/features/2012/March/Puppies-and-Exercise.jpg') no-repeat center"); }).on('touchend', function(){ $(".custom_header").css("background","red"); }).on("touchcancel", function() { $(".custom_header").css("background","red"); }); });