jQuery / JavaScript - Trigger hover on a element when mouse over on another element

Question

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.

Answer 1

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.

Answer 2

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");
});