Simple CSS hover

Question

I am working on a very simple layout here: http://www.flanels.com/ - If you click work it draws down, I am using this jQuery:

    $('#left ul li.item').hover(function() {
      $(this).addClass('over');
    }, function() {
      $(this).removeClass('over');
    });

And this is the class:

#left ul li.over{
    background-color:#4CC7DC;    
}

If you go over the link text you see that it changes to the a:hover, I am trying to make it for when you are over the li.item the a:hover link changes as well, how can I do that?

Chris Doggett · Accepted Answer · 2009-04-01 21:46:37Z

3

Is this what you're looking for?

#left ul li.over, #left ul li.over a {
    background-color:#4CC7DC;    
}

answered Apr 1, 2009 at 21:46

Chris Doggett

21k4 gold badges63 silver badges87 bronze badges

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

3 Comments

Samantha Branham Over a year ago

This is the best solution I can think of as well.

user39980 Over a year ago

Hey Chris, that worked great thank you. I see what you did with the selector, its perfect. Ryan

Chris Doggett Over a year ago

Glad I refreshed before second-guessing and trying something with jQuery.

Jason Cohen · Accepted Answer · 2009-04-01 21:46:22Z

0

Use hover() on the li.item element, then instead of accessing $(this).add/removeClass() instead access $('#left ul li.item').add/removeClass().

That is, you can set classes on any element, not just $(this), so just name the element you want to change.

answered Apr 1, 2009 at 21:46

Jason Cohen

83.5k26 gold badges111 silver badges114 bronze badges

Collectives™ on Stack Overflow

Simple CSS hover

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related