如何在鼠标悬停时显示隐藏的div？ [英] How to show hidden divs on mouseover?

问题描述

如何简单地在鼠标悬停时显示一组隐藏的div。

How to simply show a set of hidden divs on mouseover.

如果

#div1

#div2 

#div3

<

all need to be shown on mouseover, how to I do this?

推荐答案

如果div被隐藏，他们永远不会触发 mouseover 事件。

If the divs are hidden, they will never trigger the mouseover event.

您必须监听其他未隐藏元素的事件。

You will have to listen to the event of some other unhidden element.

您可以考虑将隐藏的div包装到仍然可见的容器div中，然后对这些容器的 mouseover 事件执行操作。

You can consider wrapping your hidden divs into container divs that remain visible, and then act on the mouseover event of these containers.

<div style="width: 80px; height: 20px; background-color: red;" 
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>

您还可以监听 mouseout 事件如果你想让div在鼠标离开容器时消失div：

You could also listen for the mouseout event if you want the div to disappear when the mouse leaves the container div:

onmouseout="document.getElementById('div1').style.display = 'none';"

这篇关于如何在鼠标悬停时显示隐藏的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！