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 ......

欢迎任何帮助......

Answer 1

这应该有效：

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

+选择器的使用不正确，因为它直接跟随第一个元素后面的元素。可以找到更多信息here。

Answer 2

CSS中的

+称为"adjacent sibling combinator"。兄弟姐妹是与另一个元素包含在同一父母中的元素。在这种情况下，您的.image-box元素是.text元素的兄弟。这两个元素都是.col3元素的 children 。您的第一个选择器不会选择任何内容，因为.text不是.col3的兄弟。

您需要使用descendant combinator：

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

或child combinator：

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

Answer 3

你的原因

.col3:hover + div.text

不工作是因为你正在使用相邻的选择器。您基本上所说的是“使用类文本获取任何div节点，与.col3位于同一级别，并在.col3悬停时对其执行某些操作”。但没有。 div.text与.col3不在同一级别，而是直接的子级。

您想要做的是：

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

其中说“获取任何div.text，它是.col3的直接子节点，并在.col3悬停时对其执行某些操作”。

Css可见性属性div1悬停在另一个div（div2）

3 个答案: