我有以下代码:
<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>
当悬停完成时,我有以下 css 代码,会打开一个弹出窗口:
.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;
}
但是现在我必须在处理图像时让它hover
打开弹出窗口,但是我没有通过向图像添加一个 id 并将其放在一个 div 中来实现它,也就是说,在hover
处理div
包含图像的那个时,div
在课堂上展示它info
。
这是一个如何做到这一点的例子。您应该只在悬停类前面使用总和符号(+),这就是说,当悬停在具有 .sensor 类的 div 中时,具有 .info 类的 div 必须执行引用的操作,在此案例,改变颜色
确实,弹出窗口正在显示给您,唯一的是,当您放置
left: calc(100% + 1em);
它时,它向右太远了,如果您不用肉眼滚动一点,它似乎就不会出现。请记住,您正在添加 100% 的屏幕以及更多内容。我建议您
position: relative
将每个 div 与类.sensor
和position: absolute
每个 div 与类.info
(如您所拥有的那样)。这样,您将能够.info
相对于其包含元素 (classful div.sensor
) 定位每个有类 div。您修改后的示例:
注意:如果您对 CSS 定位的工作原理有疑问,可以参考我提出的这个自动回答问题:position:relative、position:absolute 和 position:fixed 之间有什么区别?
因此,他会尽快尝试
+
(下一个兄弟)或~
(跟随他的一个兄弟)。例如:当悬停在图像中时,显示
.info
下一个的内部div
:要将其应用于兄弟 div,您应该执行以下操作: