CSS - Simulate :hover effect on touchscreen devices

Question

I can't make this code work properly,

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

can you please have a look at my JSFiddle test script?

Thanks!

Answer 1

You are binding 'touchstart touchend' to '.hover', however there is no element having class 'hover'. Try bind to 'p' like this:

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

or a more explicit selector other than just 'p'.

Also, your jsfiddle did not load jQuery lib.

http://jsfiddle.net/8PxXL/