CSS hover style for unrelated elements?

Question

I have a user interface that looks something like this.

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

I would like both area1 and area2 to display a specific style when either of them freezes. Right now, if the pointer is over area1, I get

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

If the pointer is over area2, I get

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

I want the pointer to be above region 1 or region2. I have both areas display a hang state

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

Is this only possible with CSS?

Here are 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>

Run codeHide result

Answer 1

It is certainly possible.

There are two steps:

1) , - area1, area2

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

, , 2 . ....

2) , 2 .

, 2 - , .

, - , .

.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>

Hide result

Answer 2

div css :

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

div .container div, .

. , . Javascript, . jQuery

- folloging, + , , ( .area1, .area2 , .area2 ).

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

Answer 3

: http://jsfiddle.net/u7tYE/

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