將鼠標懸停在圖片上並顯示div元素

Question

當我將鼠標懸停在一個元素上並用純CSS展示我的其他元素時，是否有任何可行的方法？ 我知道如何使簡單的懸停效果如

.class{ 
//some styles 
} 
.class:hover{ 
//some classes 
} 

但是，當我將鼠標懸停在其他的元素，並揭示另一個元素？ （對不起，我英文不好）

Answer 1

Here's a fiddle

如果您有相互嵌套的元素，你可以使用以下命令：

<div id='parent'> 
    <div id='child'></div> 
</div> 

#parent { 
    width: 200px; 
    height: 200px; 
    background: blue; 
} 
#child { 
    display: none; 
    width: 100px; 
    height: 100px; 
    background: red; 
} 
#parent:hover #child { 
    display: block; 
} 

Answer 2

有這樣做的三種方式。這些元素必須

1. 相鄰
2. 嵌套（後裔）內
3. 嵌套的（子）內

所以你可以做的

HTML

<div class="test test1">hover over me</div> 
<div class="test test1-h"></div> 

<br><br> 

<div class="test test2"> 
    hover over me 
    <div class="test test2-h"></div> 
</div> 

<br><br> 

<div class="test test3"> 
    hover over me 
    <div> 
     <div class="test test3-h"></div> 
    </div> 
</div> 

CSS

.test { 
    padding: 30px; 
    background: red; 
    display: inline-block; 
} 

.test .test { 
    background: blue; 
} 
/******************Adjacent***************/ 
.test1:hover+div.test1-h { 
    display: none; 
} 
/*****************nested within (descendant)***/  
.test2:hover > .test2-h { 
    background: green; 
} 
/*****************nested within (Child)***/ 
.test3:hover .test3-h { 
    background: tomato; 
} 

這裏是一個DEMO

Answer 3

我還發現onother我的代碼解決方案可幫助脫穎而出別人。 我 opacity和visibility Fiddle

您需要發佈更多的代碼