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

Posted

技术标签:

【中文标题】如何在鼠标悬停时显示隐藏的 div?【英文标题】:How to show hidden divs on mouseover? 【发布时间】:2011-02-12 00:30:18 【问题描述】:

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

例如:

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

所有 div 都需要在鼠标悬停事件中显示。

【问题讨论】:

请提供更多细节。鼠标悬停在什么地方? 隐藏的 div 是什么意思?您的意思是可见性设置为“隐藏”还是显示设置为“无”? 问题需要改进,澄清,更多细节。 【参考方案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>

如果您希望 div 在鼠标离开容器 div 时消失,也可以监听 mouseout 事件:

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

【讨论】:

【参考方案2】:

有一种非常简单的方法可以仅通过 CSS 实现此目的。

将不透明度应用于 0,因此使其不可见,但它仍会对 javascript 事件和 CSS 选择器做出反应。 在悬停选择器中,通过更改不透明度值使其可见。

#mouse_over 
  opacity: 0;


#mouse_over:hover 
  opacity: 1;
<div style='border: 5px solid black; width: 120px; font-family: sans-serif'>
<div style='height: 20px; width: 120px; background-color: cyan;' id='mouse_over'>Now you see me</div>
</div>

【讨论】:

哇,这是一个很棒的提示,谢谢!这正是我想要的,让它不可见但会触发事件【参考方案3】:

将鼠标移到容器上,然后将鼠标悬停在 div 上,我主要将它用于 jQuery DropDown 菜单:

复制整个文档并创建一个 .html 文件,您可以从中自行计算!

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>The Divs Case</title>
            <style type="text/css">
            * margin:0px auto;
            padding:0px;

            .container width:800px;
            height:600px;
            background:#FFC;
            border:solid #F3F3F3 1px;

            .div01 float:right;
            background:#000;
            height:200px;
            width:200px;
            display:none;

            .div02 float:right;
            background:#FF0;
            height:150px;
            width:150px;
            display:none;

            .div03 float:right;
            background:#FFF;
            height:100px;
            width:100px;
            display:none;

            div.container:hover div.div01 display:block;
            div.container div.div01:hover div.div02  display:block;
            div.container div.div01 div.div02:hover div.div03 display:block;

            </style>
            </head>
            <body>

            <div class="container">
              <div class="div01">
                <div class="div02">
                    <div class="div03">
                    </div>
                </div>
              </div>

            </div>
            </body>
            </html>

【讨论】:

【参考方案4】:

您可以将隐藏的 div 包装在另一个 div 中,这将使用 JavaScript 中的 onMouseOver 和 onMouseOut 事件处理程序切换可见性:

<style type="text/css">
  #div1, #div2, #div3   
    visibility: hidden;  
  
</style>
<script>
  function show(id) 
    document.getElementById(id).style.visibility = "visible";
  
  function hide(id) 
    document.getElementById(id).style.visibility = "hidden";
  
</script>

<div onMouseOver="show('div1')" onMouseOut="hide('div1')">
  <div id="div1">Div 1 Content</div>
</div>
<div onMouseOver="show('div2')" onMouseOut="hide('div2')">
  <div id="div2">Div 2 Content</div>
</div>
<div onMouseOver="show('div3')" onMouseOut="hide('div3')">
  <div id="div3">Div 3 Content</div>
</div>

【讨论】:

【参考方案5】:

选项 1 每个 div 都有明确标识,因此页面上的任何其他 div(没有特定 ID)都不会服从 :hover 伪类。

<style type="text/css">
  #div1, #div2, #div3  
    display:none;  
    
  #div1:hover, #div2:hover, #div3:hover  
    display:block;  
  
</style>

选项2页面上的所有div,无论ID如何,都有悬停效果。

<style type="text/css">
  div  
    display:none;  
    
  div:hover  
    display:block;  
  
</style>

【讨论】:

这个解决方案的问题是无法将鼠标悬停在未显示的 div 上。 是的,相反的情况也是可能的,但不是这样。 然后我会使用可见性:隐藏/可见规则。好点子。 不幸的是,我相信 visibility:hidden 在悬停时也有同样的问题,尽管 div 没有像 display:none 那样折叠。 假设容器是可见的,您应该能够将此 css 方法与容器 div 一起使用:例如 div#container:hover div#child display:block;

以上是关于如何在鼠标悬停时显示隐藏的 div?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery:悬停时显示和隐藏子div

在悬停时显示 div(固定位置和溢出隐藏父级)

在悬停时显示/隐藏 div 并悬停

悬停时显示另一个 div

使用 jQuery 在悬停时显示隐藏类

悬停时显示/隐藏下拉菜单 Flutter for web