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.
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; }
:hover on the <li> you can do it, like this: jsfiddle.net/nick_craver/6ncQR/1You 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");
});
<li>element, but I'm not sure it's a good idea to have :hover on li's instead of a's...