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中选择以前的兄弟元素或父元素。您只能选择下一个兄弟姐妹或子元素。

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

<td class="Red"> foo </td>

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

.Red {
  background-color: red;
}
.Green {
  background-color: green;
}
.Yellow {
  background-color: yellow;
}

因为现在<div id="punt1"> <img class="punt"src="ieplaan1.jpg"> <div id="puntnaam1" class="puntnaam">Ieplaan</div> </div>是.punt:hover + .puntnaam{ display: block; }

之后的下一个兄弟

请参阅：Is there a "previous sibling" CSS selector?

Answer 2

你不能做那样的事情

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

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

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

在图像上方悬停时显示div

2 个答案: