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

概述所以这就是我要做的事情： 我有两个并排的图标,下面有两个隐藏的跨度.当我将鼠标悬停在图标上时,我想要显示相应的跨度. ———— HTML部分—————– <span class="icons"><!--ICONS--> <li class="oneLI">one</li> <li class="twoLI">two</li></span><span class="popups 所以这就是我要做的事情：

我有两个并排的图标,下面有两个隐藏的跨度.当我将鼠标悬停在图标上时,我想要显示相应的跨度.

———— HTML部分—————–

<span ><!--ICONS-->    <li >one</li>    <li >two</li></span><span >    <span ></span>    <span ></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？

http://jsfiddle.net/RLhKK/

解决方法 让我先解释你的选择器

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 ><!-- Better use div here -->    <ul>        <li >one <br /><span >Show Me</span></li>        <li >two <br /><span >Show me as well</span></li>    </ul></span>.icons li > span {    opacity: 0;}.icons li:hover > span {    opacity: 1;}

Demo

我怎么能实现这个目标？

Demo 2

<div >    <span >Hover Me</span>    <div ID="hover1">First</div>    <span >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属性,因为它们非常适合您希望使用转换传输元素.

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

总结

以上是内存溢出为你收集整理的html – 带有悬停的CSS兄弟选择器全部内容，希望文章能够帮你解决html – 带有悬停的CSS兄弟选择器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。