悬停状态 Heirachy 问题答案

【问题标题】：Hover state Heirachy Issues悬停状态 Heirachy 问题
【发布时间】：2016-10-10 09:35:00
【问题描述】：

我正在开发一个非常简单的网站，它占用视口的大小。

我使用 Flexbox 将 3 个东西放在视口中间。我的意图是让一个文本块在悬停时消失，同时另一个块出现。

在下面的示例代码中，“标题”类应该消失，而最初隐藏的“子标题”应该重新出现。

我已经通过将悬停状态更改应用到 div“容器”来“几乎”工作，但是由于内部的几个容器使用 100% 的宽度和高度在视口中居中，因此悬停状态采用鼠标在视口上的任何位置时都会产生效果。

我尝试将悬停状态应用于“标题”容器，该容器未设置为填充视口，但我不知道如何更改子标题的不透明度。

我的理解是，如果它们都包含在同一个父容器中，则下面的悬停 CSS 将起作用，但在这种情况下不起作用。

CSS

.headline:hover {opacity:0}
.headline:hover > .sub-headline {opacity:1}



<div class="container">
<div class="bg-image"></div>
<div class="headline">Headline Text</div>
<div class="sub-headline">Sub-Headline Text</div>
</div>

【问题讨论】：

标签： css css-selectors hover

【解决方案1】：

有了这个 HTML

<div class="container">
<div class="bg-image"></div>
<div class="headline">Headline Text</div>
<div class="sub-headline">Sub-Headline Text</div>
</div>

您的选择器不正确，因为您使用的是通用后代选择器>

这个：

.headline:hover {opacity:0}
.headline:hover > .sub-headline {opacity:1}

应该是这样的：使用相邻选择器+

.headline:hover {opacity:0}
.headline:hover + .sub-headline {opacity:1}

根据您的要求使用更通用的同级选择器~。

.headline:hover {opacity:0}
.headline:hover ~ .sub-headline {opacity:1}

The 30 CSS Selectors You Must Memorize

【讨论】：

不错的链接 - 我从来不知道 :only-child... 每天学习新东西！

【解决方案2】：

很难看到更多代码，因为它在您的场景中可能会有所不同...

您正在使用直接后代选择器 (>)，您应该使用相邻兄弟选择器 (+)

.headline:hover {opacity:0}
.headline:hover + .sub-headline {opacity:1}

<div class="container">
  <div class="bg-image"></div>
  <div class="headline">Headline Text</div>
  <div class="sub-headline">Sub-Headline Text</div>
</div>

或者，将子标题包含在标题中，它应该使用原始问题中的直接后代选择器按预期工作（注意 - 我使用 visibility 属性而不是 opacity 在此示例中）：

.headline:hover {visibility: hidden;}
.headline:hover > .sub-headline {visibility: visible;}

<div class="container">
  <div class="bg-image"></div>
  <div class="headline">Headline Text
    <div class="sub-headline">Sub-Headline Text</div>
  </div>
</div>

【讨论】：