<!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>