CSS hover styles on unrelated elements?

Question

I have a UI that looks something like this

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |         | |         |  |
|  |         | |         |  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

I'd like both area1 and area2 to show a particular style when either of them is hovered over. Right now if pointer is over area1 then I get

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |.........| |         |  |
|  |....☝....| |         |  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

If pointer is over area2 I get

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |         | |.........|  |
|  |         | |....☝....|  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

What I want is if the pointer is over either area1 OR area2 I both areas show their hover state

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |.........| |.........|  |
|  |....☝....| |.........|  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

Is that possible with only CSS?

Here's some live HTML/CSS

* { 
  box-sizing: border-box;
}
html,body { 
  width: 100%;
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.unrelatedcontainer {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}
.area1,
.area2 {
  margin: 3em;
  height: 80%;
  border: 1px solid black;
  
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.area1:hover, 
.area2:hover {
  background-color: green;
}

<div class="container">
  <div class="unrelatedcontainer">
    <div class="area1">
      <div class="content">area1</div>
    </div>
  </div>
  <div class="unrelatedcontainer">
    <div class="area2">
      <div class="content">area2</div>
    </div>
  </div>
</div>

You must to change the markup. If your `.area1` and `.area2` are side by side, you can. With your actual markup your only solution is javascript (CSS can`t target parent elements to go back and find the second area to paint) — Marcos Pérez Gude, Dec 03 '15 at 09:25
It's not possible with just CSS. If you get rid of `.unrelatedcontainer`, then the `~` sibling selector may be of some use to you. However, there isn't a way to select the previous sibling with just CSS: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector — Kyle O, Dec 03 '15 at 09:30
I think it's possible - [this fiddle](https://jsfiddle.net/Novocaine88/vfh0cu6u/) is pretty close - im working on it — Novocaine, Dec 03 '15 at 09:30

Danield · Accepted Answer · 2015-12-03T10:26:31.070

This is certainly possible.

There are two steps involved:

1) Place the hover effect on the container so that as soon as you hover over anywhere in the container - both area1 and area2 get their new background

.container:hover .area1,.container:hover .area2 {
   background-color: green;
}

The problem here is that now the hover effect will take effect anywhere in the container and not only when I hover over the 2 areas. So....

2) The trick is to turn off pointer events on the container and to turn them back on on the 2 areas.

So when the mouse hovers anywhere in the container outside the 2 areas - the hover effect is not applied because we have disabled pointer events on the container.

However, as soon as the mouse hovers over the 2 areas - we enable pointer events again and the hover effect springs into action.

.container{
  pointer-events:none;
}
.container .area1,.container .area2{
  pointer-events:all;
}

FIDDLE

* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.container {
  pointer-events: none;
}
.container .area1,
.container .area2 {
  pointer-events: all;
}
.container:hover .area1,
.container:hover .area2 {
  background-color: green;
}
.unrelatedcontainer {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}
.area1,
.area2 {
  margin: 3em;
  height: 80%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

<div class="container">
  <div class="unrelatedcontainer">
    <div class="area1">
      <div class="content">area1</div>
    </div>
  </div>
  <div class="unrelatedcontainer">
    <div class="area2">
      <div class="content">area2</div>
    </div>
  </div>
</div>

+1 for a neat, CSS-only solution! Given the OP doesn't have to react to some other pointer events to the container area, obviously — GavinoGrifoni, Dec 03 '15 at 10:08
@gman - I edited my post again with further information. I disagree with you regarding the pointer events. They **are necessary** if we go by what you said: "What I want is if the pointer is over either area1 OR area2 I both areas show their hover state" as I explained in my edited answer — Danield, Dec 03 '15 at 10:30

mad_manny · Answer 2 · 2015-12-03T10:06:03.167

You can surround both areas by a container div and adjust your css to:

.container:hover > div{
    background-color: #000000;
}

This will give all divs inside your .container div black background, if you hover over the container.

Please note: This will also happen, if you hover between the areas. Else you need Javascript, e.g. jQuery

You can also do something like the folloging, but the + works only for elements following the hovered element, not for elements before (this will lead to work only for hover on .area1, but when .area2 is hovered, only .area2 will be colored).

.area1:hover + .area2, .area2:hover + .area1, .area1:hover, .area2:hover{
  background-color: #000000;
}

Raza Hussain · Answer 3 · 2015-12-03T10:06:39.513

Only this will work in one way here is an example :http://jsfiddle.net/u7tYE/

when you hover on one div it will hover to the other div

<div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

</div>
<div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

</div>

div{
  height 200px;
  background-color: #ddd;
  margin-top:20px
}

/*  this is working */
#a:hover+ #b{
  background-color:red;
}
/* This will not work */
#b:hover + #a{
  background-color:blue !important;
}

That's not what the OP was after. They wanted both divs to highlight when either one was hovered over. — Novocaine, Dec 03 '15 at 09:38

CSS hover styles on unrelated elements?

3 Answers3

FIDDLE