jquery 如何设置鼠标在div区域内时显示div,离开div隐藏div!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
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一下都会有那个效果。
这样处理:
- 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> 