При наведении открыть другой блок.
Давайте разберемся!
При наведении открываем другой блок
Пример - почему не открывается наружный блок?
Первым пунктом рассмотрим пример, когда унас будет два блока и один из них будет вложен во второй!
Давайте нарисуем блок и внутри него второй блок.
<div class="second_1">second_1</div>
</div>
Добавим стилей, чтобы совсем уже убого не было, первый блок(видимый) - будет серым, втри блок будет красным.
Внутренний блок нам нужно скрыть добавим display_none.first_1 {
width: 100px;
height: 100px;
background: #c5c5c5;
}
.second_1 {
width: 100px;
height: 100px;
background: red;
}
.first_1:hover .second_1 {
display: block;
}
.second_1 {
display: none;
}
</style>
Давайте посмотри, что у нас получилось:
При наведении открывается внутренний блок:
Теперь, чтобы блок открылся наведите на видимую часть блока №1.
как видим, второй блок, который находится внутри - прекрасно показывается при наведении!
Если мы второй блок поместим снаружи первого блока... то hover не будет работать:
<div class="first_2">first_2</div><div class="second_2">second_2</div>
Наведите мышь на видимую часть первого блока:
Эта проблемка решается просто!
При наведении открывает другой блок.
Как я уже сказал выше... мы вынесли дочерний блок наружу и после этого блок перестал открываться!
Давайте сделаем... чтобы он открывался, для этого нам понадобится:
Опять возьмем два блока div с классом "first" и "second"
<br>
<div class="second"></div>
Стили css аналогичные... но только добавим тильду "~" при наведении(hover) на первый блок!
.first {
width: 100px;
height: 100px;
background-color: gray;
}
.first:hover ~ .second {
display: inline-block;
}
.second {
width: 100px;
height: 100px;
background-color: red;
display:none;
}
</style>
Далее расположим данный код ниже этих строчек:
Результат открытия другого-наружного блока при наведении:
Теперь вы можете увидеть, как наружный блок. который стоит отдельно от основного, на который мы наводим мышку прекрасно отрывается!

подробнее.
подробнее.