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

Question

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.

En la pregunta hablas de elementos hermanos pero en el código son padre e hijo — , Apr 18 '18 at 07:31
la redacción es medio confusa pero se entiende que lo que le funciona es padre hijo, y quiere que haga lo mismo con elementos hermanos en el ejemplo la imagen es la primera con clase `img-sensor` que es hermano del padre de `info` — alo Malbarez, Apr 18 '18 at 09:53

Dario B. · Accepted Answer · 2018-04-18T08:12:57.357

3

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

.sensor {
  width: 100px; 
     height: 100px; 
     background: #428bca;
     cursor:pointer;
}

.info {
  width: 100px; 
     height: 100px; 
     background: red;
}

.sensor:hover + .info {
  background:green;
}

<div class="sensor">

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

</div>

edited Apr 18 '18 at 08:12

answered Apr 18 '18 at 07:59

Dario B.

455
1
3
16

El problema es que el div sensor estando abajo no me funciona – Alcides Salazar Apr 18 '18 at 15:02

score 2 · Answer 2 · answered Apr 17 '18 at 21:08

Realmente si que se te estaba mostrando el popup, lo único que al ponerle left: calc(100% + 1em); se va demasiado a la derecha y si no haces un poco de scroll a simple vista parece que no aparece. Ten en cuenta que le estás sumando un 100% de la pantalla más un poco más.

Te recomiendo ponerle position: relative a cada uno de los div con clase .sensor y position: absolute a cada uno de los div con clase .info (tal y como lo tenías). De esta manera, podrás posicionar cada div con clase .info respecto a su elemento contenedor (div con clase .sensor).

Tu ejemplo modificado:

.sensor{
  position: relative;
}

.info {
    opacity: 0;
    position: absolute;
    left: 20px;
    top: 10px;
    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;
}

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

NOTA: Si tienes dudas sobre cómo funciona el posicionamiento CSS puedes consultar esta pregunta-auto respuesta que hice sobre ello: ¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?

alo Malbarez · Answer 3 · 2018-04-18T10:09:17.697

1

Así a lo rápido probaría con + (siguiente hermano) ó ~ (alguno de sus hermanos que le siguen).

Por ejemplo: Al hacer hover en la imagen mostrar el .info dentro del div que le sigue:

.img-sensor:hover + div .info {
   opacity: 1;
   z-index: 1000;
}

edited Apr 18 '18 at 10:09

answered Apr 17 '18 at 21:05

alo Malbarez

8,871
2
10
29

score 1 · Answer 4 · answered Apr 17 '18 at 21:06

1

Para aplicarlo al div hermano deberías de hacer algo como esto:

.class:hover + .class2 {

}

answered Apr 17 '18 at 21:06

bcentdev

94
5

3

Esta respuesta se reportó como de baja calidad debido a su extensión y contenido, no significa que esté mal, pero si puedes ampliarla un poco, sería lo ideal. – Edgar Gutiérrez Apr 17 '18 at 23:23

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

4 Answers4

Linked