悬停状态Heirachy问题

我正在研究一个非常简单的网站，它占据了视口的大小。悬停状态Heirachy问题

我已经使用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>

来源

2016-06-09 Aaron Luther

有了这个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

来源

2016-06-09 16:07:27

尼斯链接 - 我从来不知道'：只-child' ...了解的东西，每天新！ –

谢谢！ “+”做到了。 –

这很难，没有看到更多的代码，因为它可能是您的情况不同......

您使用嫡系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>

来源

2016-06-09 16:07:00

悬停状态Heirachy问题

回答

相关问题