2013-03-14 2 views
3

자식 또는 손자를 올렸을 때 상위 메뉴 항목을 강조 표시하는 CSS 방법 만 있습니까?CSS가 자식이 강조 표시 될 때 부모 요소를 강조 표시합니다.

EG. 예에 따라서

<ul> 
    <li><a href="link">Item 1</a> 
    <ul> 
     <li><a href="link">Item 1.1</a></li> 
     <li><a href="link">Item 1.2</a></li> 
     <li><a href="link">Item 1.3</a></li> 
    </ul> 
    </li> 
</ul> 

위 나는 "항목 1.1", "항목 1.2"또는 "항목 1.3"이상의 공중 선회하는 스타일로 "항목 1"타겟팅 할 수 있습니까?

감사합니다.

+0

너무 나타나지 않습니다. 이것을 참조하십시오 http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child – suspectus

+1

FWIW CSS 선택기 레벨 4에는 제목 선택기가있어 선택기에서 _which_ 요소를 변경할 수 있습니다 스타일이 잡히므로,'li! > a {이것은 직접 자식으로 a를 갖는 임의의 li을 스타일링합니다}. 편집 : http://dev.w3.org/csswg/selectors4/#subject – powerbuoy

답변

2

다음과 같이 적용 할 수 있습니다. 요소 위로 마우스를 가져 가면 ... 마우스를 가리키면 부모가 마우스를 '지나치게'함축합니다.

주어진 간단한 경우.

li:hover{font-weight: bold;} 

지금 당신은 이제 당신이해야 할

li:hover li{font-weight: normal} 

공중 선회하지 자식 요소를 제한하려면 다시 하이라이트는 아이들을 떴다.

li:hover li:hover{font-weight: bold;} 

JSFiddle example

+0

좋은 하나. 누군가가 당신에게 대답을하면 간단 해. :) 도와 줘서 고마워. –

관련 문제