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

Question

我有一个div，我想展示另一个div，一旦我滚过它。这里是我的代码：

#DivButton:hover { 
width:100%; 
} 

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

#Div_To_Show { 
display: none; 
} 

然而，当我试试这个，这是行不通的。我试图显示#Div_To_Show一次我翻转#DivButton。任何人都可以告诉我，我做错了什么？

Answer 1

这是依赖于CSS3兄弟选择（~）：

Live Demo

<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，但需要特定的元件顺序为：

Live Demo

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