html 悬停,html – 带有悬停的CSS兄弟选择器

让我先解释你的选择器

span.icons:first-child:hover + span.popups span.one{opacity:1}

好吧,你试图选择嵌套在span.icons下的第一个子项,并在你选择span.one时嵌套在span.popups中,但是你在这里错了,你选择了相邻的span元素有.popups并不是嵌套在.icons里面的跨度,但一般来说,你的选择器是错误的,CSS不能选择父,inshort,CSS一旦进入元素就不能返回,它不能向上移动层次结构.

所以你不能那样做,要么你需要改变你的DOM,要么把所有的span元素都放在同一个级别,要么隐藏的跨度应该是子级别.

另一种实现这一目标的方法是使用位置,我不会在这里建议.

此外,您的标记无效,您需要在li周围有ul元素.

让我们改变DOM,看看我们如何选择

• one Show Me
• two Show me as well

.icons li > span {

opacity: 0;

}

.icons li:hover > span {

opacity: 1;

}

我怎么能实现这个目标？

Hover Me

First

Hover Me

Second

.icons > div[id] {

opacity: 0;

height: 100px;

width: 100px;

background: red;

}

.icons > span {

display: block;

}

.icons > span:hover + div {

opacity: 1;

}

如果您不想使用不透明度,也可以使用display或visibilty属性,因为它们非常适合您希望使用转换传输元素.

Demo 3(如果要使用不透明度方法,请使用转换)