将鼠标悬停在图像上时显示 div答案

【问题标题】：Showing div while hovering over image将鼠标悬停在图像上时显示 div
【发布时间】：2015-10-27 21:47:45
【问题描述】：

我试图在将鼠标悬停在图像上时放大图像，并在将鼠标悬停在该图像上时显示带有文本的 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;
}

我做错了什么？

【问题讨论】：

您的代码没有意义。您正在检查将鼠标悬停在具有“punt”和“puntnaam”类的不存在的元素上。我建议使用 javascript 来获得所需的效果，并使用触发“悬停”事件的函数来执行这两项任务。

标签： html css hover

【解决方案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> 之后的下一个兄弟

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

【讨论】：

skyline3000 正在输入此内容，我正在为您创建此内容jsfiddle.net/399j5e03，与所述内容完全相同...

【解决方案2】：

你不能这样做

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

它在 CSS 中无法以这种方式工作，因为 puntnaam 已经被隐藏了，你可以使用简单的jQuery代码来解决它

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

【讨论】：