I have the following code:
<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>
I had the following css code for when the hover is done, a popup opens:
.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;
}
but now I have to make it hover
open the popup when doing over the image, but I haven't achieved it by adding an id to the image and putting it inside a div, that is, when doing hover
over the div
one that contains the image, show it div
with the class info
.
Here is an example of how to do it. You should only use the sum symbol ( + ) in front of the hover class, with this you are saying that, when hovering in the div with the .sensor class, the div with the .info class must do the referenced action, in this case , change color
Really, the popup was being shown to you, the only thing that when you put
left: calc(100% + 1em);
it, it goes too far to the right and if you don't scroll a little with the naked eye, it seems that it doesn't appear. Keep in mind that you are adding 100% of the screen plus a little more.I recommend you
position: relative
to put each of the div with class.sensor
andposition: absolute
each of the div with class.info
(as you had it). This way, you will be able to position each classful div.info
relative to its containing element (classful div.sensor
).Your modified example:
NOTE: If you have doubts about how CSS positioning works, you can consult this auto-answer question I made about it: What is the difference between position: relative, position: absolute and position: fixed?
So as soon as possible, he would try
+
(next brother) or~
(one of his brothers that follows him).For example: When hovering in the image, show the
.info
inside of thediv
one that follows:To apply it to the sibling div you should do something like this: