在悬停时显示特定的div？仅使用css和html

Question

我希望在光标悬停在锚标记上时，使用类div a显示第二个dikh（在HTML中）。

HTML CODE：

<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

像这样写：

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

Answer 2

您需要使用相邻的兄弟选择器~。此外，您要显示的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 3

你可以在这里使用javascript函数。

  

＆LT;的onmouseover = “的document.getElementById（ '本身份识别码'）的style.display = '块'。” ＆GT;

     

＆LT; id =“myid”class =“dikha”＆gt;

默认情况下，您的dikha类应隐藏

  

.dikha {display：none; }

你也可以使用jquery slidetoggle方法来实现这个