Question

使用以下jQuery代码，当触摸设备用户触摸div元素时，将显示悬停效果。触摸空白区域后，悬停效果应该消失。

$('div').hover(
    function() { $(this).text('hover effect appears') },
    function() { $(this).text('') }
);

在Android操作系统上运行正常。但在iOS上，悬停效果并没有消失。

请参阅demonstration on jsFiddle。

Answer 1

请参阅此jsfiddle。在带有iOS 9.3.5的iPad Air 2上经过Safari和Chrome（最新版本）测试，它可以按预期运行。

HTML：

<head>
    <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div class="hover"></div>
</body>

JS：

$('div.hover').hover(
    function() { $(this).text('hover effect appears') },
    function() { $(this).text('') }
);

$('div.hover').on('tap', function() {
    $('div.hover').text('hover effect appears');
    return false;
});

$('body').on('tap', function(e) {
    $('div.hover').text('');
});

CSS：

* {
      margin: 0;
      padding: 0;
}

html, body {
      height: 100%;
}

div.hover {
      width: 200px;
      height: 100px;
      border: 1px solid #000;
}

或者，如果您还想要＆＃34; hover＆＃34;当您的用户再次触及<div>时效果消失，您可以使用以下tap事件代替上述tap事件：

$('div.hover').on('tap', function() {
    var $div = $('div.hover');

    if($div.text().length) {
        $div.text('');
    }
    else {
        $div.text('hover effect appears');
    }

    return false;
});

jQuery hover（）的第二个功能在iOS

1 个答案: