将鼠标悬停在图片上时显示 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

您不能 select DOM 中的先前兄弟元素或父元素与 CSS。您只能 select 下一个兄弟元素或子元素。

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

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

那么您的 selector 可能看起来像这样：

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

因为现在 <div> 是 <img>

之后的下一个兄弟

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

Answer 2

你不能那样做

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

它在 CSS 中不起作用，因为 puntnaam 已经隐藏，您可以使用简单的jQuery代码来解决它

$(".punt").hover(function() {
$("#puntnaam1").show();
 });

将鼠标悬停在图片上时显示 div

Showing div while hovering over image

html

css

hover