鉴于现有的“按钮”
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秒按钮“悬停”(改变颜色等),在下一个间隔“关闭”,随后的按钮将“打开”,依此类推……
解决方法
- #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);
