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
.
img-sensor
que es hermano del padre deinfo