使用jQuery模拟悬停

考虑到现有的“按钮”

HTML:

我想在每个按钮上自动模拟“悬停”，按顺序，每n秒一次

---

这意味着每n秒一个按钮被“悬停”（改变颜色等），下一个间隔是“关闭”，下面的按钮将“打开”，以此类推……

定义第三个选择器，如

#李娜：悬停，#李娜 a:focus，#MB.列出li a.simFocus{ … }

然后根据javascript代码添加和删除基于时间的“simFocus”类。

我将使用和。

#MB。列表a:hover，
#MB.列表a：焦点，
#MB.list.activea{
/*悬停样式*/
}

（我已经简化了选择器，我还建议尝试删除外部的

div

，因为它们通常是不必要的，而

ul

就足够了）

Javascript悬停：

function setHover() {
    if ($('#MB .list .active').next().length) {
        $('#MB .list .active').next().addClass('active').end().removeClass('active');
    } else {
        $('#MB .list .active').removeClass('active');
        $('#MB .list li:first-child').addClass('active');
    }
}

setInterval(setHover, 1000);

尝试在链接a href标记中添加onClick=“return true”

<a href="../about.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()" onClick="return true">About us</a> 

onClick=“return true”应该模拟光标悬停在上面，然后离开悬停区域。有效地给你一个悬停效果

---

请记住，你的手指必须触碰按钮才能产生悬停效果，这意味着在链接加载页面之前，用户只会看到一两秒钟的变化。

几乎-但稍微优化：仅使用。simFocus。不会改变函数，但通过使用更多名称而不是层次结构来简化选择器是一个非常好的速度优化。因此，我们可以使用.elem list链接来代替#elem ul li a.myclass one，该链接仅在该上下文中使用，即在id=“elem”下面li下面li下面的链接（a）中。我正在遵循您的解决方案。这就是我一直在寻找的。运行Firebug时，我可以看到类“active”被分配给每个“li”元素，在间隔时间内正确地循环列表项；但是样式在视觉上没有改变，我相信是因为内部的“a”元素。你更新了CSS选择器吗？这将把悬停样式应用于

.active

类的子类的任何

a

。是的，它将同时应用于“active”类的所有“a”元素子类。。。

function setHover() {
    if ($('#MB .list .active').next().length) {
        $('#MB .list .active').next().addClass('active').end().removeClass('active');
    } else {
        $('#MB .list .active').removeClass('active');
        $('#MB .list li:first-child').addClass('active');
    }
}

setInterval(setHover, 1000);

<a href="../about.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()" onClick="return true">About us</a>