Question

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

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

在下面的示例代码中，“headline”类应该消失，最初隐藏的“sub-headline”应该重新出现。

我已经通过将悬停状态更改应用于div“容器”来“几乎”工作，但是由于内部的几个容器使用100％的宽度和高度在视口中居，所以悬停状态采取只要鼠标在视口的任何位置，就可以生效。

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

我的理解是，如果它们都包含在同一个父容器中，那么hover下面的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>

Answer 1

如果没有看到更多代码，这很困难，因为在您的方案中可能会有所不同......

您正在使用直接后代selctor（+），您应该使用相邻的兄弟选择器（.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>

application.coffee

Answer 2

使用此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

悬停状态Heirachy问题

2 个答案: