Simulate Hover using jQuery

Question

Given the existing "buttons"

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

I'd like to simulate "hover" automatically on each button, sequentially, every n seconds.

This means that every n seconds a button is "hovered" (changing color etc), at next interval is "turned off" and the following button will "turn on" and so on...

Answer 1

I would use setInterval and jQuery.trigger('mouseover', …).

Answer 2

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

(I've simplified your selectors a bit, I would also suggest trying to remove the outer div as these are often unnecessary and the ul alone is enough)

Javascript hover:

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