jQuery鼠标滑过DOM撑开了

 jQuery鼠标滑过DOM撑开了。这个问题是我在调试某个页面的时候发现的。在IE7及以下版本中（IE6\IE7)，当鼠标经过外层容器的时候，发现容器高度增加，显然是使用jQuery的结果，因为在这之前并没有出现问题。

看图片实例如下：

 

HTML：

<section>

<!--boys strat-->

<p id="girls-sign"><a href="/member/">Girls' Time</a></p>

<p id="big-girl"></p>

    <ul id="girls-time">

        <li><a href="#"><img src="images/big-boy.jpg" alt="" /></a></li>

 

CSS：

section{background:url(../images/e-bg.png) no-repeat; width:970px; height:522px;width:970px; margin:1px auto; position:relative; overflow:hidden;}

#girls-sign{position:absolute; left:417px; top:50px; width:100px; height:100px; }

#girls-sign a{display:block;text-indent:-10000px; width:100px; height:100px; }

#girls-time{width:320px; height:320px; float:left;padding- top:35px;padding- left:50px; position:relative;}

#girls-time li{float:left; display:inline; padding:4px; width:96px; height:96px; overflow:hidden;}

#girls-time li:hover{ background:url(../images/girls-tiem-li-bg.png) no-repeat;}

#girls-time img{width:90px; height:90px;}

#big-girl{display:block;}

#big-girl img{ position:absolute; top:190px; left:190px; z-index:1000; width:1px; height:1px; display:block;}

#big-girl img,#girls-time img{background:#fff; padding:3px; border: 1px solid #cee216;}

 

jQuery:

$(document).ready(function(){

  $("#girls-time li").mouseenter(function(){

  $("#big-girl").html($(this).html());

  $("#big-girl").css("display","block");

  $("#big-girl img").animate({height:183,width:183,top:110,left:110},"slow");

 });

  $("#girls-time li").mouseleave(function(){

  $("#big-girl img").hide(1000);

  });

 

最后使用将girls-time的定位方式改为absolute，并且修改padding值为对应位置坐标值，问题得以解决。暂时记载此处，以备今后查阅。

#girls-time{width:320px; height:320px; float:left; top:35px; left:50px; position:absolute;}

本文原载： 青岛网站建设 - 青岛SEO [http://www.elingxi.com/]
本文永久链接： http://www.elingxi.com/css/03251E2011.html