자바 스크립트/JQuery와 트리 Travesal 질문

Question

가정하자 나는이 다음

<ul> 
<li>Item 1</li> 
<li>Item 2 
    <ul> 
    <li>Sub Item</li> 
    </ul> 
</li> 
<li>Item 3</li> 
</ul> 

이 목록은 (그래서 전용 아이디의/클래스의 밖으로 질문을 자동으로 생성 된 다른 코드에 의해 추가되는

. 좀 jQuery를 있다고 가정 내가 마우스를 올리면 li에 배경색이 생기는 코드가 있지만, "하위 항목"목록 항목을 마우스 오버하면 "항목 2"도 강조 표시됩니다. 사용자가 마우스를 움직일 경우 어떻게 만들 수 있습니까? "Sub Item"에 대해서만 "Item 2"가 아닌 배경색 만 넣을 수 있습니까?

나는 이미 $ ("li")과 같은 것을 잊어 버렸습니다. doSomething ... on 이미 페이지를 ...

Answer 1

당신의 선택자로 $ ('ul li li')을 시도하십시오. IE

ul li li:hover {background:#00F;} 

JQuery와 솔루션 편집

, 그것은 같은 선택이다. IE

`$ ('ul li li') .css ('background', '# 00F');

Answer 2

처음에는 CSS의 일부분, 호버 클래스와 배경이 <li> 요소에 필요하므로 부모의 배경이 어린이에게 표시되지 않습니다. 그렇지 않으면 배경이 투명하기 때문에 부모가 무엇이든간에 이 같은) 표시됩니다 :

​.hover { background: #ddd; } 
li { background: #fff; } 

그런 다음 mouseover 및 mouseout (하지mouseenter 및 mouseleave.hover() 등의 용도로 사용할 수 있습니다), 다음과 같이 :

$('li').mouseover(function(e){ 
    $(this).addClass("hover").parents().removeClass("hover"); 
    e.stopPropagation(); 
}).mouseout(function(){ 
    $(this).removeClass("hover"); 
});​ 

You can see a working demo here. 이것은 .mouseover()과 .mouseout()을 사용합니다 (자식 요소를 입력/이탈 할 때 발생합니다. mouseenter/mouseleave은 특별히 그렇지 않습니다). 마우스를 올리면 현재 <li>에 hover 클래스를 적용하고있을 수있는 부모로부터 클래스를 삭제합니다. 또한 우리는 event.stopPropagation() 그렇게 같은 일이 요소의 부모에 발생하지 않습니다와 버블 링에서 이벤트를 방지 ... 그냥이 물건 :