javascript 使用鼠标悬停、鼠标移出显示、隐藏 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13160484/
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
show,hide DIV with mouseover , mouseout
提问by Mohamamdreza Siahpoosh
i want to create a simple dropdown menu with div but i have this problem: when goes over my button div show pretty good but when mouse goes out from my link field (in this case show/hide text) my div goes to hide . how can i change my hide area button ? because in my files i cant select links in dropdown div.
我想用 div 创建一个简单的下拉菜单，但我遇到了这个问题：当我的按钮 div 显示得很好但是当鼠标从我的链接字段中消失时（在这种情况下显示/隐藏文本）我的 div 去隐藏。如何更改隐藏区域按钮？因为在我的文件中，我无法在下拉 div 中选择链接。
HTML code:
HTML代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | Sliding Div</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="dropdown/drop.js" type="text/javascript"></script>
<link type="text/css" href="dropdown/drop.css" rel="stylesheet"/>
</head>
<body>
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv" style="width:103px;height:60px;">
<img alt="" height="80" src="images/dropdown.png" width="103">
</div>
</body>
</html>
CSS code:
CSS代码：
.show_hide {
display:none;
}
JavaScript code:
JavaScript 代码：
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').mouseover(function(){
$(".slidingDiv").slideToggle();
});
$('.show_hide').mouseout(function(){
$(".slidingDiv").slideToggle();
});
});
采纳答案by roacher
You need to wrap the link and the div into the same container,then bind the event there.
您需要将链接和 div 包装到同一个容器中，然后在那里绑定事件。
<div class="wrapper">
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv" style="width:103px;height:60px;">
<img alt="" height="80" src="images/dropdown.png" width="103">
</div>
</div>
Then,rather then biding the event to show_hide, bind it to the class 'wrapper'.
然后，而不是将事件提交给 show_hide，将其绑定到“包装器”类。
回答by StuartLC
In addition to @roacher's answer, you will also need to crop the wrapper div tightly to the image by setting a width.
除了@roacher 的回答之外，您还需要通过设置宽度将包装器 div 紧密地裁剪到图像上。
You can also replace the mouseover/ mouseoutpairing with a hover
您还可以用悬停替换mouseover/mouseout配对
And lastly, I'm not sure you want to set the sliding div's height smaller (60px) than the image (80px)?
最后，我不确定您是否要将滑动 div 的高度设置为小于图像（80 像素）（60 像素）？
jsFiddlehere
jsFiddle在这里
