Mouseover- mouseleave on touch devices using jQuery

n/a

by marufice

HTML

<a class="taphover" href="javascript:void(0);">Link 2</a>

<a class="taphover" href="javascript:void(0);">Link 3</a>

<div class="touch_indicator">m</div>

CSS

a {
    display: inline-block;
    padding: 5px 15px;
}
a.taphover:hover, a.taphover.hover {
    background: red;
    color: white;
}

JavaScript

$('a.taphover').on("touchstart", function (e) {
    var link = $(this); //preselect the link
    $('.touch_indicator').text('touchstart');
    if (link.hasClass('hover')) {
    } else {
        link.addClass("hover");
    $('a.taphover').not(this).removeClass("hover");
    }
});

$('a.taphover').on('touchend touchcancel',function (e){
    $('.touch_indicator').text('touchend');
    $(this).removeClass("hover");
    // here we can consider finished the touch event   
});

$('a.taphover').on('click',function (e){
     $('.touch_indicator').text('clicked');
});