使用jQuery模拟悬停效果

Question

鉴于现有的“按钮”

HTML：

 <div id="MB">
    <ul class="list">
       <li id="post-5"><a href="#post-5">5</a></li>
       <li id="post-4"><a href="#post-4">4</a></li>
       <li id="post-3"><a href="#post-3">3</a></li>
       <li id="post-2"><a href="#post-2">2</a></li>
       <li id="post-1"><a href="#post-1">1</a></li>
    </ul> 
 </div>

CSS：

  #MB .list li a {
        float:left;
        color:#333;
        background:#f6f6f6;
        border:1px solid #eaeaea;
        border-right:none;
        padding:0 8px;
        }

   #MB .list li a:hover,
   #MB .list li a:focus {
        color:#fff;
        border:1px solid #333333;
        border-right:none;
        background:#404040;
        text-decoration:none;
        }

我想要自动模拟每个按钮的“悬停”状态，间隔n秒逐个执行。

这意味着每隔n秒，一个按钮会处于“悬停”状态（改变颜色等），在下一个时间间隔结束后，该按钮将“关闭”，接下来的按钮将“打开”，以此类推...

- Riccardo

Answer 1

我会使用 setInterval 和 jQuery.trigger('mouseover', …)。

- kojiro

Answer 2

#MB .list a:hover,
#MB .list a:focus,
#MB .list .active a {
  /* hover styles */
}

我简化了你的选择器。我建议尝试删除外部的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);

- roryf

---

我正在跟随你的解决方案。这正是我要找的。在运行Firebug时，我可以看到“active”类被分配给每个“li”元素，在间隔期间正确循环列表项; 但是样式没有可视化更改，我认为这是因为内部的“a”元素。 - Riccardo

你更新了 CSS 选择器吗？这将应用悬停样式到任何位于 .active 类的 a 子元素上。 - roryf

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

Answer 3

定义第三个选择器，如下：

#MB .list li a:hover,#MB .list li a:focus,#MB .list li a.simFocus { … }

然后根据 JavaScript 代码的时间要求添加或删除“simFocus”类。

- fforw

---

几乎可以了 - 但还可以优化一下：只使用 .simFocus。这不会改变功能，但通过使用更多名称而不是层次结构来简化选择器是非常好的速度优化。因此，可以使用以下内容代替： #elem ul li a.myclass .elem-list-link 它仅在该上下文中使用，即在id="elem"下的ul下的li下的链接(a)中。 - Mörre

Answer 4

尝试在您的链接a href标签中添加onClick="return true"

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

onClick="return true" 应该模拟光标悬停并离开悬停区域，有效地给你一个悬停效果。

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

- user2212713