Javascript 如何在鼠标悬停时显示隐藏的div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2707100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show hidden divs on mouseover?
提问by Hyman P.
How to show a set of hidden div's onmouseover?
如何在鼠标悬停时显示一组隐藏的div？
For example :
例如 ：
<div id="div1">Div 1 Content</div>
<div id="div2">Div 2 Content</div>
<div id="div3">Div 3 Content</div>
All div's need to be shown onmouseover event.
所有 div 都需要在鼠标悬停事件上显示。
回答by Daniel Vassallo
If the divs are hidden, they will never trigger the mouseoverevent.
如果 div 被隐藏，它们将永远不会触发该mouseover事件。
You will have to listen to the event of some other unhidden element.
您将不得不收听其他一些未隐藏元素的事件。
You can consider wrapping your hidden divs into container divs that remain visible, and then act on the mouseoverevent of these containers.
您可以考虑将隐藏的 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>You could also listen for the mouseoutevent if you want the div to disappear when the mouse leaves the container div:
mouseout如果您希望 div 在鼠标离开容器 div 时消失，您也可以监听该事件：
onmouseout="document.getElementById('div1').style.display = 'none';"
回答by bitbyte
There is a really simple way to do this in a CSS only way.
有一种非常简单的方法可以只用 CSS 来做到这一点。
Apply an opacity to 0, therefore making it invisible, but it will still react to JavaScript events and CSS selectors. In the hover selector, make it visible by changing the opacity value.
将不透明度应用到 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>回答by Trey Hunner
You could wrap the hidden div in another div that will toggle the visibility with onMouseOver and onMouseOut event handlers in JavaScript:
您可以将隐藏的 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>
回答by Evilalan
Pass the mouse over the container and go hovering on the divs I use this for jQuery DropDown menus mainly:
将鼠标移到容器上，然后将鼠标悬停在 div 上，我主要将它用于 jQuery DropDown 菜单：
Copy the whole document and create a .html file you'll be able to figure out on your own from that!
复制整个文档并创建一个 .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>
回答by Christopher Altman
Option 1Each div is specifically identified, so any other div (without the specific IDs) on the page will not obey the :hover pseudo-class.
选项 1每个 div 都是专门标识的，因此页面上的任何其他 div（没有特定 ID）都不会遵守 :hover 伪类。
<style type="text/css">
#div1, #div2, #div3{
display:none;
}
#div1:hover, #div2:hover, #div3:hover{
display:block;
}
</style>
Option 2All divs on the page, regardless of IDs, have the hover effect.
选项2页面上所有的div，不管ID，都有悬停效果。
<style type="text/css">
div{
display:none;
}
div:hover{
display:block;
}
</style>
