Question

我正试图弄清楚如何在触控设备中实现“鼠标悬停”效果。

我创建了这个简单的例子来演示我正在寻找的行为。

$( document ).ready(function() {
    isDown = false;

    $('#rect1').on('touchstart mousedown', function(e) {
        e.stopPropagation();
        e.preventDefault();

        isDown = true;

        $(this).css({"background-color":"red"});
    });

    $(document).on('touchend mouseup', function(e) {
        e.stopPropagation();
        e.preventDefault();

        isDown = false;

        $('#rect1').css({'background-color':'grey'});
        $('#rect2').css({'background-color':'grey'});
    });

    $('#rect2').on('touchmove mouseover', function(e) {//.hover(function() {
        if (isDown) {
            $(this).css({"background-color":"red"});
        }
    });
});

http://jsfiddle.net/mE9Ug/

我想在移动设备（触摸设备）上实现相同的行为。

正如您所看到的（在示例中），touchmove无法正常工作。我也尝试了jquery mobile的vmouseover，但效果不佳。

如果有人有任何想法，我真的很感激它！

感谢，阿萨夫

Answer 1

iOS设备上有一个技巧：http://www.codediesel.com/javascript/making-mouseover-event-work-on-an-ipad/

触控设备中的鼠标悬停效果

1 个答案: