悬停一个元素并使用同一个父元素影响另一个元素

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向右浮动的容器。

我希望在悬停#one时显示#three。基于此answer，我尝试在代码中添加+选择器，因为#one直接位于#two结束标记之后，但它不起作用（ fiddle）。

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

Answer 1

我把你的小提琴分开并稍微改变一下，做你需要的东西。如果那就是你想要的，请告诉我。当我不在工作并且有更多时间时，我可以解释发生了什么。

关键是将您的div#one移动到与:hover

相同的容器中

http://jsfiddle.net/bWb3Q/

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