CSS兄弟选择器w/Hover

Question

所以这就是我要做的事情:

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

------------ 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？

http://jsfiddle.net/RLhKK/

Answer 1

让我首先解释你的选择器

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

好吧,你试图选择嵌套在下面和上面的第一个孩子span.icons你选择span.one哪个嵌套在里面,span.popups但你在这里出错了,你选择的是与嵌套在里面的相邻span元素,但在一般来说,你的选择器是错误的,CSS无法选择父,inshort,CSS一旦进入元素就无法返回,它无法向上移动层次结构..popupsspan.icons

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

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

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

让我们改变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;
}

演示

我怎么会这样做？

演示2

<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属性,如果您不想使用opacity它们,因为它们非常适合您想要使用的元素transition.

演示3 (transition如果您要使用opacity方法,请使用)