当前位置: 首页 > 面试题库 >

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

袁奇玮
2023-03-14
问题内容

如何显示一组隐藏的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事件中显示。


问题答案:

如果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';"


 类似资料:
  • 我有这个样本: 链接 CODE超文本标记语言: 所有人都能清楚地理解错误所在,并能清楚地了解所有人的行为,包括发明者的行为,并能清楚地了解自己的真实性和准建筑风格。 代码CSS: 代码JS: 我希望div

  • 我有一个应用程序,我想在

  • 问题内容: 我试图当鼠标移到图像的左下方时出现一个小框。在该框内,将有一个指向其他页面的链接。 这有点类似于我想要的东西,但是盒子要更小并且不连接到图像的边框。 我已经尝试了一切,但找不到答案。而且我不想使用工具提示,更不用说我没有任何JavaScript知识了。我真的希望这是CSS。 问题答案: 这是在CSS3中使用伪元素。 HTML: CSS: 相反,这是使用jquery达到相同结果的一种方式

  • 问题内容: 当有人将鼠标悬停在元素上时,我想显示一个div ,但是我想在CSS中而不是在JavaScript中执行此操作。您知道如何实现吗? 问题答案: 您可以执行以下操作: 这使用相邻的兄弟选择器,是the下拉菜的基础。 HTML5允许锚元素包装几乎所有内容,因此在这种情况下,该元素可以成为锚的子元素。否则原理是相同的-使用伪类更改另一个元素的属性。

  • 当我在图表上移动鼠标时,如何修复图表js错误,使其显示旧数据。 我的Js文件 我可以在图表js中显示JSON响应中的数据,但当我在图表上移动鼠标时,它的问题显示了以前的值。 我曾试图破坏这种方法,但并没有奏效。如何预防这个问题??。

  • 我认为我的问题是一个已知的问题,每次我制作一个新的图表,并将鼠标悬停在画布上的一些点上,旧的图表总是会闪进闪出。这是我试图修复它的一个线程,但似乎没有任何效果。我试图重新添加画布,使用破坏,清除,如果语句应该清除它,但什么都没有。 这是我的代码: 我尝试添加