如何使用jquery從鏈接中刪除：hover狀態？

Question

我有一個帶有以下簡化菜單代碼的網站：

<li><a id='link1' class="menu active" href="javascript:doslide(1);">Item 1</a></li>
<li><a id='link2' class="menu" href="javascript:doslide(2);">Item 2</a></li>
<li><a id='link3' class="menu" href="javascript:doslide(3);">Item 3</a></li>
<li><a id='link4' class="menu" href="javascript:doslide(4);">Item 4</a></li>
<li><a id='link5' class="menu" href="javascript:doslide(5);">Item 5</a></li>

在我的CSS中， .menu:hover為菜單鏈接提供了不同的背景色，而.menu.active指示選定的屏幕。 doslide()是一個javascript函數，用於根據位置從左向右滑動屏幕，它的工作原理如下：

var currentpanel = 1;
var numpanels = 5;
doslide = function(panelid) {
    if (panelid != currentpanel) {
        $('.menu').blur();
        $('.active').removeClass("active");
        $('#link'+panelid).addClass('active');
        . . .
}

我還添加了觸摸屏滑動檢測器，因此，除了使用菜單在面板之間移動之外，您還可以左右滑動以進入下一個屏幕。 關鍵是要模擬移動應用程序的功能。

我的問題是，當我在手機上使用此菜單項時，如果我點擊菜單項以加載該屏幕，然后滑動，則我點擊的菜單項仍處於:hover狀態。 這意味着您可以在屏幕3上，但是突出顯示屏幕2的菜單項，就像您將鼠標懸停在它上面一樣。 我以為$('.menu').blur(); 可以解決此問題，但不能解決。 是否有一種簡單的方法可以從鏈接中刪除:hover狀態？ 我不想完全刪除鼠標懸停效果，只是讓手機不再認為菜單項懸停了。

我也嘗試過將菜單鏈接轉到javascript:; 並附加事件以進行click ，但無濟於事。 對於滑動，我嘗試了以下兩種方法：

$('#panelholder').swipe({
    swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
        if (direction == 'left' && currentpanel < numpanels) {
            $('#link_'+(currentpanel+1)).click();
            // doslide(currentpanel+1);
        } else if (direction == 'right' && currentpanel > 1) {
            $('#link_'+(currentpanel-1)).click();
            // doslide(currentpanel-1);
        }
    }
});

我也嘗試添加setTimeout(function() {$('body').click().trigger('tap');}, 50); 無濟於事。

Answer 1

最簡單的方法是將：hover css包裝在媒體查詢中，以使其不適用於移動設備。

@media screen and (min-width: 1200px) { 
  myElement:hover {}
}