Show a Div after rolling over another div- How To?

I have a div where I want to show another div once I roll over it. Here is my code:

#DivButton:hover {
width:100%;
}

#DivButton:hover #Div_To_Show {
disp开发者_运维百科lay: block;
}

#Div_To_Show {
display: none;
}

However, when I try this, it doesn't work. Im trying to show #Div_To_Show once I rollover #DivButton. Can anyone tell me what exactly it is i'am doing wrong?

This is dependent on the CSS3 sibling selector (~):

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>

This one doesn't depend on CSS3, but requires specific element order:

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>