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>

Answer 1

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>

Answer 2

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;
}

Answer 3

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;
}