Question

This question may have been asked before and I’m sorry if I missed it,

I have this drop down menu structure :

<ul id="menu">
    <li><a>text1</a></li>
    <li class="withchild"><a class="itemchild">text2</a>
        <ul>
        ...
        </ul>
    </li>
    <li><a>text3</a></li>
</ul>

I’m changing itemchild‘s background on hover.

$("li.withchild ul").hover(function(){
    $(this).parent().find('.itemchild').css('background','the new background');
},
function(){
    $(this).parent().find('.itemchild').css('background','the old background');
});

And a the CSS for li.withchild a.itemchild:hover{the new background}

My problem : If I hover over .itemchild the background changes, and then hover over

li.withchild ul , .itemchild‘s background remains with new background. But if I hover off

li.withchild ul back onto .itemchild the background returns to old background.

What is the best way to work around this?

Answer 1

If you want to have .itemchild display the new background when your mouse is over EITHER .itemchild OR li.withchild ul, the best way would probably be to attach the hover to the parent element:

$("li.withchild").hover(function(){
    $(this).find('.itemchild').css('background','the new background');
},
function(){
    $(this).find('.itemchild').css('background','the old background');
});

Or, you could first wrap li.withchild ul and .itemchild into a new div of their own with wrapAll() and then attach the event to that.

Am I understanding your question correctly?