显示悬停的特定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方法来实现这一