滚动另一个 div 后显示一个 Div - 如何？

Question

我有一个 div，当我滚动它时我想显示另一个 div。这是我的代码：

#DivButton:hover {
width:100%;
}

#DivButton:hover #Div_To_Show {
display: block;
}

#Div_To_Show {
display: none;
}

但是，当我尝试这样做时，它不起作用。我试图在鼠标悬停#DivButton 后显示#Div_To_Show。谁能告诉我我到底做错了什么？

Answer 1

这取决于 CSS3 同级选择器 (~)：

现场演示

<style type="text/css">
#DivButton:hover {
    width:100%;
}
#DivButton:hover ~ #Div_To_Show {
    display: block;
}
#Div_To_Show {
    display: none;
}
</style>

<div>
    <button id="DivButton">DivButton</button>
    <div id="Div_To_Show">
        You can see me now!
    </div>
</div>

---

这个不依赖于 CSS3，但需要特定的元素顺序：

现场演示

<style type="text/css">
#DivButton:hover {
    width:100%;
}
#DivButton:hover #Div_To_Show {
    display: block;
}
#Div_To_Show {
    display: none;
}
</style>

<div id="DivButton">
    Default text.
    <div id="Div_To_Show">Extra text!</div>
</div>