4

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.

2
  • 1
    En la pregunta hablas de elementos hermanos pero en el código son padre e hijo
    – user7176
    Commented el 18 abr. 2018 a las 7:31
  • 1
    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 Commented el 18 abr. 2018 a las 9:53

4 respuestas 4

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>

1
  • El problema es que el div sensor estando abajo no me funciona Commented el 18 abr. 2018 a las 15:02
2

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?

1

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

.class:hover + .class2 {

}

1
  • 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. Commented el 17 abr. 2018 a las 23:23
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;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.