css - 悬停一个元素并影响另一个具有相同父元素的元素

Question

我知道这个问题被问了很多次，但我找不到答案。

我有一个包含 2 个 div 的容器

<div id="container">
    <div id="two">
        <div id="three">three, please hover me</div>
    </div>
    <div id="one">one</div>
</div>

其中#one是以绝对定位显示在容器外，#two是让div #three float 的容器正确的。

我想在悬停#three 时显示#one。基于此 answer ，我试图在我的代码中添加一个 + 选择器，因为 #one 直接在 #two 结束标记之后，但它没有不工作(fiddle)。

如果需要，您可以更改我的结构，我唯一想保留的是 #one 显示在容器外部，#two float 到右侧.如果可能的话，我想避免使用 jQuery 脚本并将所有内容都保留在 CSS 中。谢谢!

Answer 1

我已经 fork 了你的 fiddle 并稍微改变了它来做你需要的。如果那是你想要的，请告诉我。当我不在工作并且有更多时间时，我可以解释发生了什么。

关键是将您的 div#one 移动到与 :hover 相同的容器中

http://jsfiddle.net/bWb3Q/

编辑:根据对问题的评论，更新 fiddle :http://jsfiddle.net/bWb3Q/3/