jquery hover multiple items

Question

say you have this code:

    $("#sub_nav_home1").hover(function () {
        $("#homepage").removeClass();
        $("#homepage").addClass("homepage1");
    });
    $("#sub_nav_home2").hover(function () {
        $("#homepage").removeClass();
        $("#homepage").addClass("homepage2");
    });
    $("#sub_nav_home3").hover(function () {
        $("#homepage").removeClass();
        $("#bhomepage").addClass("bhomepage3");
    });

    <ul class="nav sub_nav_home">
        <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li>
        <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li>
        <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li>
     </ul>

IS there a way were we can only do the hover jquery functionality once, instead of one per link?

Hope that made sense

Cheers

Check my answer, i think i know what you're looking for, and i made it easiest implementation based on the DOM markup you have. — Oscar Godson
– Oscar Godson, Commented Nov 23, 2010 at 23:36

Oscar Godson · Accepted Answer · 2010-11-24 18:03:14Z

1

Err, quickest way i can think of is (this will be dynamic too):

    $("#sub_nav_home a").hover(function () {
         $("#homepage").removeClass().addClass("homepage"+$(this).parent().attr('id').split('sub_nav_home')[1]);
    });

    <ul class="nav sub_nav_home">
        <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li>
        <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li>
        <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li>
     </ul>

That will make the class homepage[the id number inside that's parent] i.e. homepage1, homepage2, etc

--UPDATE--

This should work for you (but i didnt test it! Just let me know if it doesnt work)

//find the first li and add a class of current to start the loop
$('.sub_nav_home li:first').addClass('current');
//Here we set the loop
setInterval(function(){
    //Here we are checking if there IS a next item. If there IS it'll return 1
    //which will make this if() true (1 > 0)
    if($('.current').next().length > 0){
        //Here we grab the current .current, remove the class, get the next item
        //and then add .current to that
        $('.current').removeClass('current').next().addClass('current');
    }
    else{
        //If the if() fails (returns 0 [no next() item]) we'll get the current
        //.current, remove the class, get the parent, find the first item in the
        //parent (first <li> of the <ul>) and add a class of current
        $('.current').removeClass('current').parent().find(':first').addClass('current');
    }
},3000) //3000 = 3 seconds

P.S. if this works for you, make sure to give me an up vote ;)

edited Nov 24, 2010 at 18:03

answered Nov 23, 2010 at 23:34

Oscar Godson

32.9k42 gold badges129 silver badges207 bronze badges

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

2 Comments

user Over a year ago

another thing... how would you add a class to each "li" that rotates. say, add a class "current" to the first "li" and after 3 seconds remove it and add it to the next "li" and then start again?

Oscar Godson Over a year ago

OK, i updated my post. Let me know if it doesn't work. I didnt test it, but it should.

Ali Tarhini · Accepted Answer · 2010-11-23 23:33:31Z

0

add class to each li:

<li class="c1" id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li>

$('ul.nav sub_nav_home li').hover(function () { 
        $("#homepage").removeClass(); 
        $("#bhomepage").addClass("bhomepage" + this.className.replace("c","")); 
    });

answered Nov 23, 2010 at 23:33

Ali Tarhini

5,3686 gold badges45 silver badges66 bronze badges

Collectives™ on Stack Overflow

jquery hover multiple items

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related