Hacer hover en un div y se aplique hover en un div hermano?

publicado por: Anonymous

Tengo el siguiente codigo:

<div id="contenido-plano">
  <div id="plano">
    <img class="img-sensor" src="http://placehold.it/800x600/eee">
    <div style="top:10px; left:100px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="1">
      <div class="info">
        Sensor1
        <br>
        <a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(1)"><i class="glyphicon glyphicon-edit"></i></a>
        <a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(1)"><i class="glyphicon glyphicon-erase"></i></a>
      </div>
      <img src="http://placehold.it/20/0a0" width="20">
    </div>
    <div style="top:359px; left:252px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="3">
      <div class="info">
        Sensor2
        <br>
        <a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(3)"><i class="glyphicon glyphicon-edit"></i></a>
        <a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(3)"><i class="glyphicon glyphicon-erase"></i></a>
      </div>
      <img src="http://placehold.it/20/0a0" width="20">
    </div>
    <div style="top:252px; left:571px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="4">
      <div class="info">
        Sensor3
        <br>
        <a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(4)"><i class="glyphicon glyphicon-edit"></i></a>
        <a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(4)"><i class="glyphicon glyphicon-erase"></i></a>
      </div>
      <img src="http://placehold.it/20/0a0" width="20">
    </div>
  </div>
</div>

tenia el siguiente codigo css para cuando se haga el hover se abra un popup:

.info {
    opacity: 0;
    position: absolute;
    left: calc(100% + 1em);
    top: 76%;
    font-size: .8em;
    padding: 0.1em 3em;
    border-radius: 2.2em;
    font-family: arial;
    background: #DEDEDE;
    color: #362e2e;
    transition: all ease .3s;
    transform: translateX(-62%) translateY(-140%);
    white-space: nowrap;
    text-align: center;
}

.sensor:hover .info {
    opacity: 2;
    z-index: 1000;
}

pero ahora debo hacer que al hacer hover encima de la imagen abra el popup, pero no lo he logrado agregando un id a la imagen y metiendolo dentro de un div, es decir que al hacer hover encima del div que contiene la imagen, muestre el div con la clase info.

solución

Aquí te dejo un ejemplo de como hacerlo.
Solo debes utilizar el símbolo sumatorio ( + ) delante de la clase hover, con esto estas diciendo que, al hacer hover en el div con la clase .sensor, el div con la clase .info debe de hacer la acción referenciada, en este caso, cambiar de color

_x000D_

_x000D_

.sensor {_x000D_
  width: 100px; _x000D_
     height: 100px; _x000D_
     background: #428bca;_x000D_
     cursor:pointer;_x000D_
}_x000D_
_x000D_
.info {_x000D_
  width: 100px; _x000D_
     height: 100px; _x000D_
     background: red;_x000D_
}_x000D_
_x000D_
.sensor:hover + .info {_x000D_
  background:green;_x000D_
}

_x000D_

<div class="sensor">_x000D_
_x000D_
</div>_x000D_
<div class="info">_x000D_
_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *