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...

kojiro · Accepted Answer · 2014-04-08 13:11:36Z

6

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

edited Apr 8, 2014 at 13:11

answered Mar 2, 2011 at 15:14

kojiro

77.8k20 gold badges151 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naveen DA · Accepted Answer · 2019-11-28 05:16:20Z

5

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

edited Nov 28, 2019 at 5:16

Naveen DA

4,3986 gold badges44 silver badges62 bronze badges

answered Mar 2, 2011 at 15:16

roryf

30.2k17 gold badges84 silver badges105 bronze badges

3 Comments

Riccardo Over a year ago

I'm following your solution. It is what I was looking for. Running Firebug, I can see the class "active" being assigned to each "li" element, looping through list items correctly upon interval; however the style doesn't visually change, I believe because of the inner "a" element.

roryf Over a year ago

Did you update your CSS selector? that will apply the hover style to any a that is a child of .active class.

Riccardo Over a year ago

Yes, it will apply to ALL the "a" element child of the "active" class at the same time...

fforw · Accepted Answer · 2011-03-02 15:14:01Z

0

Define a third selector like

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

and then add and remove the "simFocus" class time-based per javascript code.

answered Mar 2, 2011 at 15:14

fforw

5,5611 gold badge20 silver badges17 bronze badges

1 Comment

Mörre Over a year ago

Almost - but optimize a little: use only .simFocus. Doesn't change function, but simplifying selectors by using more names instead of hierarchies is a very good speed optimization. So instead of #elem ul li a.myclass one could use .elem-list-link which is used only in that context, i.e. in links(a) below li below ul below id="elem".

user2212713 · Accepted Answer · 2013-03-30 16:15:28Z

-1

Try adding onClick="return true" in your link a href tag

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

the onClick="return true" should simulate a cursor hovering over then leaving the hover area. effectivly giving you a hover effect.

keep in mind, ur finger has to touch the button for the hover effect to take place, which means the user will only see the change for a second or two before the link loads a page.

answered Mar 30, 2013 at 16:15

user2212713

1

Collectives™ on Stack Overflow

Simulate Hover using jQuery

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related