Блог

Главная - Вопросы по программированию - Показывать Div после переноса на другой div- Как это сделать?

Показывать Div после переноса на другой div- Как это сделать?

#css #hover

#css #наведите курсор

Вопрос:

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

 #DivButton:hover {
width:100%;
}

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

#Div_To_Show {
display: none;
}

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

Комментарии:

1. Не могли бы вы, пожалуйста, добавить html-разметку? таким образом, мы можем помочь вам лучше

Ответ №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>

Комментарии:

1. По-видимому, поддерживается IE7 , FF3 , Chrome и т.д.

2. Должны ли мои два div быть обернуты внутри контейнера div? Должен ли div, который я хочу показать, располагаться непосредственно после кнопки наведения курсора? Потому что мой html настроен не так. У меня кнопки наведения курсора находятся в совершенно другом месте, чем то, где должен отображаться мой div, на расстоянии многих строк кода.

3. @WillingLearner: Любое CSS-решение требует, чтобы div, который вы хотите показать / скрыть, находился ПОСЛЕ кнопки, на которую вы наводите курсор. Похоже, вам понадобится исправление javascript или jQuery.