CSS : 호버를 사용하여 div 표시

Question

마우스를 두 번째 div로보고 싶습니다. 인접 형제을 콤비

.abc { 
    display: none; 
} 
a:hover + .abc{ 
    display: block; 

} 

Answer 1

HTML

<a>Hover over me!</a> 
<div class="ab">Some content</div> 
<div class="abc">Some text here</div> 

CSS는 당신이 원하는 것을 정확히되지 않습니다. div가 바로 앵커를 따라 가기 때문에 클래스 .ab으로 만 div를 선택할 수 있습니다.

이

a:hover ~ .abc { 
    /*...*/ 
} 

이것은 공중 선회 앵커 요소를 다음 때마다 .abc 선택하지만 그것을하지 않습니다 그 전에 직접 수 있습니다

은 당신이 원하는 것은 이것이다.

Answer 2

너무 늦어서 약간 늦게 도착 했으므로 늦었습니다. 여기에 내 대답에 대한 바이올린 : http://jsfiddle.net/digitalextremist/F5k4L/

주요 문제는 여기에 인접한 div에 대한 @의 kleinfreud의 제안을 사용하지만 표시 및 숨기기에 다른 접근 방식으로 엮어은 div :

.abc { 
    opacity: 0; 
} 
a:hover ~ .abc{ 
    opacity: 100; 
} 

이 공간 div을 있는지 확인합니다 소요될 시간은 예약되어 있으므로 필요한 경우 표시합니다.