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

Answer 1

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

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

Answer 3

此处的链接将为您提供代码和说明！

http://forum.jquery.com/topic/simulate-hover-event

Answer 4

定义第三个选择器，如

#MB .list li a：hover，＃MB .list li a：焦点，＃MB .list li a.simFocus { ... }

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

Answer 5

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

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

onClick =“return true”应该模拟一个悬停在悬停区域上方的光标。有效地给你一个悬停效果。

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

使用jQuery模拟Hover

5 个答案: