html - 将鼠标悬停在图像上时显示 div

Question

我试图在将鼠标悬停在图像上时放大它，并在将鼠标悬停在该图像上时显示带有文本的 div。放大有效，但显示另一个 div 无效。

<div id="punt1">
    <div id="puntnaam1" class="puntnaam">Ieplaan</div>
    <img class="punt"src="ieplaan1.jpg">
</div>

对于我使用的 CSS:

.punt{
    height: 100px;
    width: 100px;
}

.puntnaam{
    display: none;
}

.punt:hover{
    transform: scale(3);
}

.punt:hover .puntnaam{
    display: block;
}

我做错了什么？

Answer 1

您不能使用 CSS 选择 DOM 中之前的兄弟元素或父元素。您只能选择下一个 sibling 或子元素。

例如，如果您将代码更改为:

<div id="punt1">
    <img class="punt"src="ieplaan1.jpg">
    <div id="puntnaam1" class="puntnaam">Ieplaan</div>
</div>

然后你的选择器看起来像这样:

.punt:hover + .puntnaam{
    display: block;
}

因为现在 <div>是 <img> 之后的下一个 sibling

参见:Is there a "previous sibling" CSS selector?