在图像上方悬停时显示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中选择以前的兄弟元素或父元素.您只能选择下一个兄弟姐妹或子元素.

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

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

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

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

因为现在<div>是下一个兄弟姐妹<img>

请参阅:是否存在"以前的兄弟"CSS选择器？