jquery 怎么设置鼠标在div区域内时显示div，离开div隐藏div
日期：2014-05-16 浏览次数：20372 次
jquery 如何设置鼠标在div区域内时显示div，离开div隐藏div
<!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" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#show').hover(function(){
$(this).show();
}, function(){
$(this).hide();
});
});
</script>
<div id="show" style="background-color:#ff0000;">aaa</div>
隐藏div后占位就没有了，怎么让它再显示？
------解决方案--------------------
我晕， 你的div是默认是display:block，宽度是100%，也就是你只要在那一行hover一下都会有那个效果。
这样处理：
<!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" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#show').hover(function(){
$(this).show();
}, function(){
$(this).hide();
});
});
</script>
<div id="show" style="background-color:#ff0000;">aaa</div>
隐藏div后占位就没有了，怎么让它再显示？
------解决方案--------------------
我晕， 你的div是默认是display:block，宽度是100%，也就是你只要在那一行hover一下都会有那个效果。
这样处理：
- HTML code
<!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" />
<script src="../jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#show').hover(function(){
$('#box').show();
}, function(){
$('#box').hide();
});
});
</script>
<body>
<a id="show" style="float:left; clear:right; text-decoration:none;" href="javascript:void(0);">aaa</a>
<div id="box" style="clear:both;float:left;border:1px solid #ccc;width: 300px; height:200px; display:none;">This node that can use to show or hide...</div>
</body>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
