Is this possible? My HTML looks like this:

<ul>
  <li> <a> link </a> </li>
  <li> <a> link </a> </li>
  <li> <a> link </a> 
    <ul>
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
    </ul>
  </li>
</ul>  

Basically I want to trigger the hover CSS rule on the parent menu link when the mouse is over a child menu link.

Is this possible? My HTML looks like this:

<ul>
  <li> <a> link </a> </li>
  <li> <a> link </a> </li>
  <li> <a> link </a> 
    <ul>
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
    </ul>
  </li>
</ul>  

Basically I want to trigger the hover CSS rule on the parent menu link when the mouse is over a child menu link.

• javascript
• jquery
• html
• menu
• mouseover

• a solution to this would be to move the hover styles on the <li> element, but I'm not sure it's a good idea to have :hover on li's instead of a's... – Alex Commented Aug 29, 2010 at 22:52

2 Answers 2

If you use .hover() it'll affect the parent as well, since that's how the mouseenter and mouseleave events work, for example:

$("li").hover(function() {
  $(this).toggleClass("active");
});

You can give it a try here, unlike mouseover and mouseout, the events don't fire when entering/leaving children, so the action taken on the parent isn't "undone" until you actually leave the parent as well, which seems to be what you're after.

Or, use pure CSS if you're just doing styling, like this (doesn't work in IE6):

li:hover > a { color: red; }​

You can test it here.

You can reach the parent node by using parent() method and toggle its class binding the mouseover and mouseout events.

$("#childnode").bind("mouseover", function() {
   $(this).parent().addClass("onmouseover");
}).bind("mouseout", function() {
   $(this).parent().removeClass("onmouseover");
});