Я пытаюсь сделать так, чтобы у меня было 2 div, один в верхней части экрана с именем и один в нижней части экрана с некоторыми кнопками. Если вы наведете курсор на один из div, они оба станут видимыми. Я узнал об использовании + и ~, чтобы второй появлялся при наведении курсора на первый div, но не могу найти способ сделать это наоборот. Вот что у меня есть сейчас: http://codepen.io/anon/pen/ojpqao

Html:

<div class="bg">
  <div class="topbar"></div>
  <div class="bottombar"></div>
</div>

Css:

.bg {
  background-color: red;
  width: 200px;
  height: 200px;
}

.topbar {
  width: 200px;
  height: 20px;
  background-color: green;
}

.bottombar {
  width: 200px;
  height: 20px;
  background-color: green;
  top: 180px;
  position: absolute;
}

.topbar:hover, .bottombar:hover, .topbar:hover + .bottombar {
  background-color: blue;
}
0
Riv 21 Окт 2015 в 02:07

2 ответа

Лучший ответ

Я бы просто немного изменил вашу разметку, так как ваша нижняя полоса в любом случае абсолютно позиционирована:

<div class="topbar">
    <div class="bottombar"></div>
</div>

Тогда вы сможете:

.topbar:hover,
.topbar:hover .bottombar {
    background-color: blue;
}

http://codepen.io/inorganik/pen/gaoeEQ

0
inorganik 20 Окт 2015 в 23:24

К сожалению, я считаю, что для этого нет решения CSS, см. [Эту страницу] (Есть ли CSS-селектор "предыдущий брат"?)

Вероятно, вам нужно сделать это в Javascript

0
Community 23 Май 2017 в 12:03