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

【问题标题】：Css visibility property div1 hovering another div(div2)Css 可见性属性 div1 悬停在另一个 div(div2)
【发布时间】：2013-11-07 01:37:46
【问题描述】：

我用 .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 时显示......

欢迎任何帮助...

【问题讨论】：

标签： html css hover

【解决方案1】：

这应该可行：

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

+ 选择器的使用是不正确的，因为它的目标是紧跟第一个元素的元素。更多信息可以在here找到。

【讨论】：

【解决方案2】：

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

您需要使用descendant combinator:

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

或者child combinator：

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

【讨论】：

【解决方案3】：

你的原因

.col3:hover + div.text

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

你想做的是：

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

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

【讨论】：