如何在鼠标悬停时显示隐藏的div？

小编典典

如何在鼠标悬停时显示隐藏的div？

css

如何显示一组隐藏的div的onmouseover？

例如：

<div id="div1">Div 1 Content</div>
<div id="div2">Div 2 Content</div>
<div id="div3">Div 3 Content</div>

所有div需要在onmouseover事件中显示。

阅读 1906

2020-05-16

共1个答案

小编典典

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

您将不得不听其他未隐藏元素的事件。

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

<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消失，也可以监听事件：

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

2020-05-16