Показать Div после пролонгации другого Div- Как? - PullRequest
Новая
       0

Показать Div после пролонгации другого Div- Как?

1 голос
/ 07 мая 2011

У меня есть div, где я хочу показать еще один div, когда переверну его. Вот мой код: 

#DivButton:hover {
width:100%;
}

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

#Div_To_Show {
display: none;
}

Однако, когда я пытаюсь это сделать, это не работает. Я пытаюсь показать #Div_To_Show, как только я переверну #DivButton. Может кто-нибудь сказать мне, что именно я делаю неправильно?

1 Ответ

1 голос
/ 07 мая 2011

Это зависит от селектора братьев и сестер 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>

Thisодин не зависит от 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>
...