html - toda - Estilos de desplazamiento de CSS en elementos no relacionados?

css altura de pantalla

Question

Tengo una IU que se parece a esto

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

Me gustaría que tanto area1 como area2 muestren un estilo particular cuando cualquiera de ellos está suspendido. En este momento si el puntero está sobre el área1, entonces obtengo

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

Si el puntero está sobre el área2, obtengo

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

Lo que quiero es si el puntero está sobre el área1 O el área2 que ambas áreas muestran su estado de vuelo estacionario

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

¿Es posible solo con CSS?

Aquí hay algunos HTML / CSS en vivo

* { 
  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

Esto es ciertamente posible.

Hay dos pasos involucrados:

1) Coloque el efecto de desplazamiento sobre el contenedor para que tan pronto como pase el puntero sobre cualquier lugar del contenedor, tanto area1 como area2 obtengan su nuevo fondo

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

El problema aquí es que ahora el efecto de desplazamiento tendrá efecto en cualquier lugar del contenedor y no solo cuando pase el mouse sobre las 2 áreas. Asi que....

2) El truco consiste en desactivar los eventos del puntero en el contenedor y volverlos a encender en las 2 áreas.

Por lo tanto, cuando el mouse se encuentra en cualquier lugar del contenedor fuera de las 2 áreas, el efecto de desplazamiento no se aplica porque hemos deshabilitado los eventos del puntero en el contenedor.

Sin embargo, tan pronto como el mouse se desplace sobre las 2 áreas, habilitamos nuevamente los eventos de puntero y el efecto de desplazamiento entra en acción.

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

VIOLÍN

* {
  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

Puede rodear ambas áreas mediante un div contenedor y ajustar su CSS a:

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

Esto dará todos los divs dentro de tu .container div black background, si pasas el cursor sobre el contenedor.

Tenga en cuenta que esto también sucederá si se desplaza entre las áreas. De lo contrario, necesitas Javascript, por ejemplo jQuery

También puede hacer algo como folleting, pero el + funciona solo para elementos que siguen al elemento fijo, no para elementos anteriores (esto conducirá a trabajar solo para el flip en .area1, pero cuando .area2 está suspendido, solo .area2 será de colores).

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

Answer 3

Solo que esto funcionará de una manera. Aquí hay un ejemplo: http://jsfiddle.net/u7tYE/

cuando pasas el cursor sobre un div, pasará al otro 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;
}