CODEWITHSUNDEEP
jquerycss
Jay Wit
Jay Wit

Reputation: 3057

CSS hover change other class

Is there a way to change the class of an other object when I hover over an object? A menu-item has to change when I hover over the sub-menu. I have;

ul.menu .menulink {
  padding:0px 13px 0px;
  height:23px;
  font-weight:bold;
  width:auto;
}
ul.menu ul li:hover .menulink{
  color:#002d36;
  background-image:none; 
  background-color:#ffffff;
}

HTML;

<ul class="menu" id="menu">
    <li>
        <a href="#" class="menulink"><span>Main menu item</span></a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
</ul>

I also tried jQuery;

    $('ul.menu ul li').mouseover(function(){
        $('.menulink').css('color', '#002d36');
        $('.menulink').css('background-color', '#ffffff');
    });
    $('ul.menu ul li').mouseout(function(){
        $('.menulink').css('color', '');
        $('.menulink').css('background-color', '');
    });

But that changes the other main menu items aswell.. Anyone knows how? Thanks in advance!

Upvotes: 3

Views: 9037

Answers (4)

Rito
Rito

Reputation: 5213

in css you can't select objects backwards. I wrote yesterday a little script in jq that should help.

$('.menu ul li').hover(function () {
    $(this).parent('ul').parent('li').find('a.menulink').css('color', '#002d36');
},
function(){
    $(this).parent('ul').parent('li').find('a.menulink').css('color', '#F00');
});

EDIT:

this works fine: http://jsfiddle.net/YBJHP/

Upvotes: 2

Kamyar
Kamyar

Reputation: 18797

I don't think it's possible by using pure CSS. I recommend using jQuery. You can do it very easily with jQuery: 

  $('.menulink').hover( 
    function(){
      $(this).css('background-color', '#New-Color-In-HEX');
    },
    function(){
      $(this).css('background-color', '#Old-Color-In-HEX');
    }
  );

Upvotes: 2

Marcel
Marcel

Reputation: 28097

I think what you're trying to do is keep the parent highlighted as you navigate through a sub-menu/sub-menus. To achieve this you need to apply the hover styles to the <li>'s rather than the <a>'s. An example of this in action can be seen in one of the suckerfish demos.

Upvotes: 0

Finbarr
Finbarr

Reputation: 32186

No way to do it with pure css. I'm guessing you are trying to do dropdowns with css. You may want to look at suckerfish:

http://htmldog.com/articles/suckerfish/dropdowns/

Upvotes: 0

Related Questions