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

Question

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

Answer 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';"

Answer 2

您可以将隐藏的div包装在另一个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>

Answer 3

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