Hover effect stays after touch in jQueryMobile

Question

I'm developiong application in phonegap with jQueryMobile for mobile devices only. In which I've search icon. I want to give hover effect on that icon when user touchs it.

I've achived this by css:

<a href="search.html" class="custom_header" >

    .custom_header:hover {
        background:url('../images/effect_glow.png') no-repeat center;

Now the problem is this hover effect stays after touch. I want behaviour like mousein and mouseout. In this case effect stays even that part is not touching.

How to remove hover effect after finger get off on it?

Provide us with some HTML. What icon, where, how? Create a short jsFiddle example. — Gajotres, May 29 '13 at 12:51

score 9 · Accepted Answer · answered May 29 '13 at 13:39

You maybe know this but :hover doesn’t exist on touch screen devices. So when you design a responsive website, you should carefully plan when and where to use :hover interactions.

While it is implemented on mobile devices it is extremely buggy, mostly on iOS devices. On the other end you cant use :focus because it can be used only on a elements that support focus so a tags and buttons are ruled out. Also :active is no go on mobile devices.

In this case we can use jQuery to remedy this problem.

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

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

touchcancel / vmousecancel is needed because sometimes button can stay in pressed state.

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");
     }); 
});

Hover effect stays after touch in jQueryMobile

1 Answers1

Linked