html - Css 可见性属性 div1 悬停在另一个 div(div2)

Question

我用 .text 类隐藏了一个 div

 div.text{

 visibility:hidden;
      }

这个 div 被另一个 .col3 类的 div 包围

<div class="col3">
 <div class="image-box">
 <div class="text"> test </div>
 </div>
</div>

当我将鼠标悬停在 col3 时，我希望能见度变为“可见”

我试过了

.col3:hover + div.text {

visibility:visible;
}

但是它似乎并没有以这种方式工作。奇怪的是，当我这样做的时候

 .image-box:hover + div.text{
 visibility:visible;
  }

当我将图像框悬停时，它确实显示了文本 div，但这不是我想要的，我希望它在我悬停周围的 div 时显示......

欢迎任何帮助...

score 3 · Accepted Answer

+在 CSS 中被称为“相邻兄弟组合器”。兄弟元素是包含在与另一个元素相同的父元素中的元素。在这种情况下，您的.image-box元素是您的元素的兄弟.text。这两个元素都是您的元素的子.col3元素。您的第一个选择器不会选择任何.text不是.col3.

您需要使用后代组合器：

.col3:hover div.text {
    visibility: visible;
}

.col3:hover > div.text {
    visibility: visible;
}

score 3 · Accepted Answer

这应该有效：

.col3:hover div.text {
    visibility:visible;
 }

选择器的使用+是不正确的，因为它直接针对第一个元素之后的元素。更多信息可以在这里找到。

score 2 · Accepted Answer

你的原因

.col3:hover + div.text

不起作用是因为您使用的是相邻选择器。您基本上是在说“使用与 .col3 处于同一级别的类文本的任何 div 节点，并在 .col3 悬停时对其进行处理”。但是没有。div.text 与 .col3 不在同一级别，而是它的直接子级。

你想做的是：

.col3:hover > div.text {
    visibility:visible;
}

上面写着“将任何 div.text 作为 .col3 的直接子节点，并在 .col3 悬停时对其进行处理”。

3 回答 3