顯示懸停的特定div？只使用CSS和HTML

Question

我想顯示第二個div（HTML格式），其中類別爲dikh a，光標懸停在錨標籤上。

HTML代碼：

<a>Hover over me!</a> 
<div class="faraz"> sdjfg </div> 
<div class="dikha">Stuff shown on hover</div> 

風格

div { 
display: none; 
} 

a:hover > div:nth-child(2) { 
display: block; 
background-color: RED; 
height: 250px; 
width: 960px; 
} 

Answer 1

您需要使用相鄰的兄弟姐妹選擇~。此外，您要展示的div是第三個孩子，而不是第二個孩子（因爲<a>是第一個）。

div { 
    display: none; 
} 
a:hover ~ div:nth-child(3) { 
    display: block; 
    background-color: RED; 
    height: 250px; 
    width: 960px; 
} 

演示：http://jsfiddle.net/3eFhf/

Answer 2

這樣寫：

a:hover ~ .dikha { 
    display: block; 
    background-color: RED; 
    height: 250px; 
    width: 960px; 
} 

Answer 3

，你可以在這裏使用javascript函數。

<的onmouseover = 「的document.getElementById（ '本身份識別碼'）。的style.display = '塊'」>

< ID = 「本身份識別碼」 類= 「dikha」>

你的迪哈類應該隱藏默認

.dikha {display：none; }

你也可以使用jQuery的slideToggle方法來實現這一