我正在开发一个非常简单的网站，它占用了视口的大小。
我已经使用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>I'm working on a very simple website that takes up sizes to the viewport.
I've used Flexbox to center 3 things in the middle of the viewport. My intention is for one block of text to disappear when hovered over and another block to appear at the same time.
In the sample code below class "headline" is what should disappear and "sub-headline" which is initially hidden should reappear.
I've gotten it to "almost" work by applying the hover state changes to the div "container", however since a couple of the containers inside use width and height of 100% to center in the viewport the hover states take effect anytime the mouse is anywhere on the viewport.
I attempted to apply the hover state to the "headline" container, which is not set to fill the viewport, however I can't figure out how to get the sub-headline opacity to change.
My understanding was the CSS below for hover would work if they were both contained with in the same parent container, but it's not working in this instance.
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>最满意答案
有了这个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}你必须记住的30个CSS选择器
With this HTML
<div class="container"> <div class="bg-image"></div> <div class="headline">Headline Text</div> <div class="sub-headline">Sub-Headline Text</div> </div>Your selector is incorrect as you are using the general descendant selector >
This:
.headline:hover {opacity:0} .headline:hover > .sub-headline {opacity:1}Should be this: Using the adjacent selector +
.headline:hover {opacity:0} .headline:hover + .sub-headline {opacity:1}Alternative Using a more general sibling selector ~ depending on your requirement.
.headline:hover {opacity:0} .headline:hover ~ .sub-headline {opacity:1}The 30 CSS Selectors You Must Memorize
更多推荐
发布评论