Hover Effect Stays After Touch in Jquerymobile

Hover effect stays after touch in jQueryMobile

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

Leftover hover effect on mobile

It's natural behaviour on mobile devices, I would disable CSS hover totally in this case:

Target the mobile devices with some class or media query and apply following:

.MOBILE .nav-fillpath a.next:hover::after,
.MOBILE .nav-fillpath a.next:hover .icon-wrap::after {
    -webkit-transform: initial;
    transform: initial;
    background-color: inherit;
}

If you still'd like to have alternative of hover effect on mobile you can play with :active property.

Please find example of it below:

http://jsfiddle.net/x3spsbyp/7/

How do I simulate a hover with a touch in touch enabled browsers?

OK, I've worked it out! It involves changing the CSS slightly and adding some JS.

Using jQuery to make it easy:

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

In english: when you start or end a touch, turn the class hover_effect on or off.

Then, in your HTML, add a class hover to anything you want this to work with. In your CSS, replace any instance of:

element:hover {
    rule:properties;
}

with

element:hover, element.hover_effect {
    rule:properties;
}

And just for added usefulness, add this to your CSS as well:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

To stop the browser asking you to copy/save/select the image or whatever.

Easy!

mobile safari links retains focus after touch

Hover is a CSS pseudo class designed to work with a pointer not so much with touch events. You would normally want to avoid the use of hover altogether since it makes no sense on mobile. One of the easiest ways to deal with this is by placing your hover CSS inside a media query. You can do this by targeting tablets or desktop screens, here are the two solutions:

1- Targeting iPads:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

2- Targeting desktops:

@media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

Either way is valid. You can change the values of min and max width if you notice that the CSS is being triggered incorrectly in certain devices.

Is there a better way to handle a hover event on touch devices?

In the future you should be able to use the touchenter and touchleave events, which apply to specific elements.

$("myDiv").on("touchenter mouseover", function() {
    // do hover start code
}).on("touchleave mouseleave", function() {
    // do hover end code
});

But according to MDN, this is just a proposal which hasn't been implemented yet.

If you use jQuery Mobile, you can use the vmouseover and vmouseleave events, which simulate the mouse events on mobile devices.

iPad/iPhone hover problem causes the user to double click a link

Haven't tested this fully but since iOS fires touch events, this could work, assuming you are in a jQuery setting.

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

The idea is that Mobile WebKit fires a touchend event at the end of a tap so we listen for that and then redirect the browser as soon as a touchend event has been fired on a link.

---

Related Topics