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兄弟选择器（~）：

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

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

1 个答案: