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

Question

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

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;
}

score 6 · Accepted Answer

像这样写：

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

score 3 · Accepted Answer

您需要使用相邻的兄弟选择器~。此外，您要显示的 div 是第三个孩子，而不是第二个（因为<a>是第一个）。

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

score -1 · Accepted Answer

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

<onmouseover="document.getElementById('myid').style.display='block'">

<id="myid" class="dikha">

您的 dikha 类应默认隐藏

.dikha { 显示：无；}

您也可以使用 jquery slidetoggle 方法来实现这一点

3 回答 3