html - 带悬停的 CSS 兄弟选择器

Question

所以这就是我想要做的:

我有两个并排的图标，下面有两个隐藏的 span。当我将鼠标悬停在一个图标上时，我希望显示相应的范围。

------------ 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 下的 first-child 并在悬停它时选择 span.one它嵌套在 span.popups 中，但你在这里出错了，你选择了相邻的 span 元素，其中 .popups 不相邻span嵌套在.icons里面，但是一般来说，你的选择器是错误的，CSS无法选择父元素，简而言之，CSS一旦进入元素就无法返回，它无法向上移动。

所以你不能那样做，要么你需要改变你的 DOM，并将所有 span 元素放在同一级别，要么你隐藏的 span 应该在子级别。

另一种实现此目的的方法是使用 position，我不会在此推荐。

此外，您的标记无效，您需要在 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;
}

Demo

---

我怎样才能做到这一点？

Demo 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;
}

---

如果您不想使用 opacity，您也可以使用 display 或 visibilty 属性，因为它们非常适合您需要的时候使用 transition 转换元素。

Demo 3 (如果您要使用 opacity 方法，请使用 transition)