所以这就是我要做的事情：
我有两个并排的图标,下面有两个隐藏的跨度.当我将鼠标悬停在图标上时,我想要显示相应的跨度.
———— HTML部分—————–
<span class="icons"><!--ICONS-->
<li class="oneLI">one</li>
<li class="twoLI">two</li>
</span>
<span class="popups">
<span class="one"></span>
<span class="two"></span>
</span>
————– CSS部分————–
span.popups span.one,span.popups span.two{opacity:0;
span.icons:first-child:hover + span.popups span.one{opacity:1}
span.icons:last-child:hover + span.popups span.two{opacity:1}
现在显然这不起作用,我怎么会只使用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,看看我们如何选择
<span class="icons"><!-- Better use div here -->
<ul>
<li class="oneLI">one <br /><span class="one">Show Me</span></li>
<li class="twoLI">two <br /><span class="two">Show me as well</span></li>
</ul>
</span>
.icons li > span {
opacity: 0;
}
.icons li:hover > span {
opacity: 1;
}
我怎么能实现这个目标？
<div class="icons">
<span class="hoverme">Hover Me</span>
<div id="hover1">First</div>
<span class="hoverme">Hover Me</span>
<div id="hover2">Second</div>
</div>
.icons > div[id] {
opacity: 0;
height: 100px;
width: 100px;
background: red;
}
.icons > span {
display: block;
}
.icons > span:hover + div {
opacity: 1;
}
如果您不想使用不透明度,也可以使用display或visibilty属性,因为它们非常适合您希望使用转换传输元素.
