显示，用鼠标悬停，鼠标悬停隐藏DIV
[英]show,hide DIV with mouseover , mouseout
问题描述
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 . 
我想创建一个简单的下拉菜单与div但我有这个问题：当我的按钮div显示相当不错，但当鼠标从我的链接字段（在这种情况下显示/隐藏文本）出去时，我的div去隐藏。 how can i change my hide area button ? 如何更改隐藏区域按钮？ because in my files i cant select links in dropdown 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();
});
});
2 个解决方案
解决方案1
5 已采纳 2012-10-31 14:44:56
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，将其绑定到类的“包装器”。
解决方案2
2 2012-10-31 14:57:51
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 / mouseout pairing 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的高度设置得比图像（80px）小（60px）？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.