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 {}
}

如何使用jquery从链接中删除：悬停状态？

1 个答案: