How to "link" 2 divs's hover state

Question

I'm trying to make it so that I have 2 divs, one on the top part of the screen with a name, and one on the bottom of the screen with some buttons. If you hover over 1 of the divs, they should both become visible. I found out about using the + and the ~ to make the second one appear while hovering over the first div, but can't find any way to do it the other way around. Here's what I have now: 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;
}

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

Unfortunately I believe there is no CSS solution to this, see [this page] (Is there a "previous sibling" CSS selector?)

You probably need to do it in Javascript

edited May 23 '17 at 12:03

Community

1
1

answered Oct 20 '15 at 23:18

Natural Lam

732
4
13

score 0 · Accepted Answer · answered Oct 20 '15 at 23:24

I would just change up your markup a little, since your bottom bar is absolutely positioned anyway:

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

Then you can do:

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

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

How to "link" 2 divs's hover state

2 Answers2