logo标签列表

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

javascriptjqueryhtmlcssmouseover
33

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

例如：

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

所有的div在鼠标悬停事件上需要显示。

2
请提供更多细节。鼠标悬停在什么上面？ - SLaks
1
隐藏的div是什么意思？你是指可见性设置为“hidden”还是显示设置为“none”？ - Trey Hunner
1
问题需要改进、澄清和提供更多细节。 - Jaanus
6个回答
58
如果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事件，如果想让
在鼠标离开容器
时消失：
onmouseout="document.getElementById('div1').style.display = 'none';"
19

有一种非常简单的方法可以仅使用CSS实现。

将不透明度设置为0，因此使其变得不可见，但仍会对JavaScript事件和CSS选择器做出反应。在:hover选择器中，通过更改不透明度值，使其可见。

#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>

2
哇，这是一个很好的提示，谢谢！这正是我想要的，让它不可见但触发事件。 - achecopar
13

你可以将隐藏的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>
3

将鼠标悬停在容器上，然后悬停在div上。我主要用这个来制作jQuery下拉菜单：

复制整个文档并创建一个.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>
2

选项1 每个div都有特定的ID标识，因此页面上没有特定ID的其他div将不会遵守: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 上。 - Trey Hunner
是的，相反的情况也可能发生，但不会像这样。 - Daniel Vassallo
那我会使用visibility:hidden/visible规则。好主意。 - Christopher Altman
不幸的是，我认为即使使用visibility:hidden，在悬停时也会出现相同的问题，尽管div不会像display:none一样折叠。 - Trey Hunner
1
假定容器可见，你应该能够在带有容器 div 的 css 中使用这种方法： 例如：div#container:hover div#child {display:block;} - Twelve47
0
<div
  style="width: 100%; height: 100%; background-color: #666;"
  onmouseover="this.style.display = 'none';"
>
Hello World
</div>
1
请阅读如何撰写好的答案？。虽然这个代码块可能回答了OP的问题，但如果您解释一下这段代码与问题中的代码有何不同，您做了哪些更改，为什么要更改以及为什么这样解决问题而不会引入其他问题，那么这个答案将会更加有用。 - Saeed Zhiany
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接