使用 jQuery 模拟悬停答案

【问题标题】：Simulate Hover using jQuery使用 jQuery 模拟悬停
【发布时间】：2011-07-07 08:49:58
【问题描述】：

鉴于现有的“按钮”

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 秒一个按钮“悬停”（改变颜色等），在下一个间隔“关闭”，下面的按钮将“打开”等等......

【问题讨论】：

标签： jquery css hover

【解决方案1】：

#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);

【讨论】：

我正在关注您的解决方案。这是我一直在寻找的。运行 Firebug，我可以看到“活动”类被分配给每个“li”元素，并按时间间隔正确循环列表项；但是样式在视觉上并没有改变，我相信是因为内部的“a”元素。
您是否更新了 CSS 选择器？这会将悬停样式应用于a 的任何.active 类的子级。
是的，它会同时应用于 ALL "active" 类的 "a" 元素子元素...

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试在链接中添加 onClick="return true" 一个 href 标记

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

onClick="return true" 应该模拟光标悬停然后离开悬停区域。有效地为您提供悬停效果。

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

【讨论】：

【解决方案4】：

定义第三个选择器

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

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

【讨论】：

几乎 - 但稍微优化：仅使用 .simFocus。不改变功能，但通过使用更多名称而不是层次结构来简化选择器是一个非常好的速度优化。因此，可以使用仅在该上下文中使用的 .elem-list-link 而不是 #elem ul li a.myclass，即在 id="elem" 下 ul 下 li 下的 links(a) 中。