중첩 된 사업부 호버 질문

Question

나는이 같은 3 HTML의 DIV :

<div id="MainDiv"> 
    <div id="nesteddiv1"></div> 
    <div id="nesteddiv2"></div> 
</div> 

내가 MainDiv 또는 nestedDiv1에 마우스를 가져 가면 내가 MainDiv 및 nesteddiv2의 색상 2 색상 1을 설정하려면, 다음 내가 nesteddiv2에 가져가 nesteddiv2 및 MainDiv의 배경색을 변경합니다.

나는 CSS로 그것을하는 것을 선호한다, 나는 자바 스크립트 방법을 안다.

감사 마즈 다크 교는

Answer 1

는 후손 중 하나를 포함하는 선택기를 사용하여 요소를 대상으로, CSS에서, 방법이 없습니다. 따라서 상반기가 쉽지는 않지만 후반은 불가능합니다.

큰 문제가 있으면 자바 스크립트를 사용하십시오. 대한

Answer 2

CSS를

#MainDiv:hover{ 
    color:red; 
} 

#MainDiv div#nesteddiv1{ 
    color:gray; 
} 

#MainDiv div#nesteddiv1:hover{ 
    color:blue; 
} 

#MainDiv div#nesteddiv2{ 
    color:yellow; 
} 

#MainDiv div#nesteddiv2:hover{ 
    color:green; 
} 

참고 다음에 당신이 할 수있는 HTML을 부여 :이 태그에만 마우스를 지원하는이 IE에서 작동하지 않습니다.

Answer 3

다른 요소를 선택할 수있는 방법이 없습니다. 단지 불가능합니다.

그러나이 같은 jQuery를 사용하여이 작업을 수행 할 수는 :

$(function() { 
    $("#div1").hover(function() { 
     $("#show-hide").toggleClass('highlight'); 
    }); 
}); 

나는 example for you here을 만들었습니다.

Answer 4

CSS를 사용하는 유일한 방법은 마우스를 가져 가면 maindiv를 덮기 위해 여분의 div를 사용하는 것입니다. 그것은이

<div id="MainDiv"> 
    <div id="nesteddiv1"></div> 
    <div id="nesteddiv2"> 
    <div id="extradiv"><div> 
    </div> 
</div> 

CSS는 매우 까다로운 일이 될 것입니다 마크 업을 것 Z- 인덱스

을해야하기 때문에 그리고, IE < V9에 작동하지 않을 것입니다.

(면책 조항 :이 테스트되지 않았습니다 - 아마 당신이 규칙을 더 필요)

• MainDiv 위치 할 것이다 : 친척이나 위치 : 절대, 고정 폭과 높이, 및 z 인덱스 = -1.
• 중첩 div의 1 및 2 위치 될 수 없다 : 상대 또는 절대 및 Z 인덱스 = 1
• 추가 DIV 될 것이다 : 총수 : 절대 최고 : 0, 좌 : 0과 동일한 witdth 높이 숨겨진, 및 z 인덱스 = 0
• #의 nexteddiv2 : #extradiv 디스플레이 것이다 가져 :

Z- 인덱스가 다른 배후에 allways 유지 maindiv 만들 것 블록을하면서 중첩 된 div의 일을하고 mainDiv, 디스플레이 등 2 항상 맨 위에 머물러 라. extradiv는 그들 사이에있을 것인데, maindiv를 덮고 있지만, nesteddiv2가 떠있을 때만 가능합니다.

이 방법의 단점은 nesteddiv2뿐만 아니라 사용자가 호버링을 중지 할 때까지 extradiv가 표시된다는 것입니다.