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

问题描述：

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

例如：

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

所有div的需要标出的onmouseover事件。

请提供更多的细节。在什么时候鼠标悬停？ – SLaks 2010-04-25 04:02:46

你的隐藏div是什么意思？你的意思是能见度设置为“隐藏”或显示设置为“无”？ – 2010-04-25 04:13:10

问题需要改进，澄清，更多细节。 – Jaanus 2010-04-25 05:04:47

答

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

这也适用于触摸设备，例如移动？ – kurdtpage 2017-09-23 02:49:09

答

选项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上。 – 2010-04-25 04:17:26

是的，相反将是可能的，但不是这样。 – 2010-04-25 04:20:46

然后我会使用visibility：hidden/visible规则。好点子。 – 2010-04-25 10:42:28

答

你可以换另一种DIV隐藏的div会切换与onmouseover和onmouseout事件处理程序在JavaScript中的知名度：

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

答

传递鼠标放在容器中，去徘徊了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>

答

有一种非常简单的方法可以在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>

哇，这是一个很棒的提示谢谢！这正是我想要的，使其看不见，但触发事件 – achecopar 2015-11-30 13:01:16

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

相关推荐