jQuery를 메뉴 호버

Question

이 질문은 전에 요청을받은 수 있으며, 나는 그것을 놓친 경우 미안 해요,

나는 메뉴 구조이 드롭 다운이 있습니다

<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> 

내가 itemchild의 배경을 변경하고 있습니다를 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'); 
}); 

그리고 li.withchild a.itemchild:hover{the new background}

내 문제에 대한 CSS : 나는 .itemchild을 통해 배경의 변화를 가져 한 다음 마우스를 올려 놓으면는 li.withchild ul

이상, .itemchild의 배경은 새로운 배경으로 남아있다. 하지만 내가 마우스를 가져 가면

li.withchild ul으로 돌아오고 배경은 이전 배경으로 돌아갑니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 당신이 당신의 마우스이든 .itemchild 또는 li.withchild ul 위에있을 때 .itemchild 디스플레이 새로운 배경을 갖고 싶어

Answer 1

, 가장 좋은 방법은 아마도 부모 요소에 마우스 오버시를 연결하는 것입니다 :

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

또는, wrapAll()으로 자신의 새 div에 li.withchild ul 및 .itemchild을 먼저 래핑 한 다음 해당 이벤트를 첨부 할 수 있습니다.

질문을 올바르게 이해하고 있습니까?