Do hover in a div and apply hover in a brother div?

Navigation
3

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>

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 must do that when doing hover on top of the image open the popup, but I have not succeeded by adding an id to the image and putting it into a div, that is to say that doing hover above div containing the image, show div with class info .

    
asked by Alcides Salazar 17.04.2018 в 22:41
source

4 answers

2

Here is an example of how to do it. You should only use the summation symbol (+) in front of the hover class, with this you are saying that, when hovering in the div with the class .sensor, the div with the class .info should make the action referenced, in this case , change 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>
    
answered by 18.04.2018 / 09:59
source
1

Actually if you were showing the popup, the only thing that put left: calc(100% + 1em); goes too far to the right and if you do not do a little scrolling at first glance it seems that does not appear. Keep in mind that you are adding 100% of the screen plus a little more.

I recommend putting position: relative to each of the class div .sensor and position: absolute to each of the class div .info (just as you had). In this way, you can position each div with class .info with respect to its container element (div with class .sensor ).

Your modified example: 

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

NOTE: If you have questions about how CSS positioning works, you can consult this question-self-answer I did about it: What is the difference between position: relative, position: absolute and position: fixed?

    
answered by 17.04.2018 в 23:08
0

To apply it to the div brother, you should do something like this: 

.class:hover + .class2 {

}
    
answered by 17.04.2018 в 23:06
0

So fast I would try with + (next brother) or ~ (one of his brothers who follow him).

For example: When doing hover in the image show the .info within the div that follows: 

.img-sensor:hover + div .info {
   opacity: 1;
   z-index: 1000;
}
    
answered by 17.04.2018 в 23:05
Is there a "Try-catch" in VB 6.1? Redirect to login in Laravel 5.4 if the token fails