鼠标经过图片有问题

加了把当前掠过的层 zIndex提高
你试试是不是达到你的效果<!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=gb2312" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/*品牌形象*/
/*品牌形象*/
$(document).ready (function() {  $(".pinchu").hover (function() {
    $(this).parent().parent(".pinpaijg").css ("z-index","0");

     $(this).parent().parent().css ("z-index","10");
    $('.main_pinpai ul li').not ($(this).parent().parent() ).css ("z-index","9");
    $(this).siblings (".fangdawai").css ("visibility","visible");    $(this).siblings (".fangdanei").animate ( {      width:226,
      height:226,
      top:42.5,
      left:42.5

    }, 300 );
    $(this).siblings (".fangdawai").animate ( {
      width:420,
      height:420,
      top:-56.5,
      left:-56.5
    }, 300,function() {
      $(this).siblings (".fangdawai").css ("visibility","hidden");
    });
  }
  ,function cc(){

     $(this).parent().parent().css ("z-index","0");
    $(this).siblings (".fangdanei").stop();
    $(this).siblings (".fangdanei").animate ({
      width:0,
      height:0,
      top:155.5,
      left:155.5
    }, 300);
    $(this).siblings (".fangdawai").stop();
    $(this).siblings (".fangdawai").animate ( {
      width:310,
      height:310,
      top:0,
      left:0
    }, 300
   );
  });
});
</script>
<style>
.main_pinpai
{
width:476px; height:1461px; position:relative; margin-left:324px;
}
.main_pinpai ul li
{
width:311px; height:311px; position:absolute;
}
.pinchu
{
width:180px; height:180px; position:absolute; left:60px; top:65px; z-index:9999; background:#F00;
}
</style>
</head><body>
<div class="main_pinpai">
<ul>
<li style="left:0px; top:165px; background:url(../images/zaotu/pinpai/pinpaiz1_bj.png)" class="pinpaijg">
  <a href="#">
    <img class="fangdanei" style="width:0px; height:0px; left:155.5px; top:155.5px; position:absolute;" src="../images/zaotu/pinpai/pinpaiz1_tc.png" />
    <img class="fangdawai" style="width:310px; height:310px; position:absolute; left:0px; top:0px;" src="../images/zaotu/pinpai/pinpaixx1.png" />
    <img src="../images/zaotu/pinpai/pingpaiz4.png" style="width:311px; height:311px; position:absolute; left:0px; top:0px;"   />
    <img class="pinchu" src="../images/zaotu/pinpai/pinpaichudian.png" />
    </a>
</li><li style="left:165px; top:0px; background:url(../images/zaotu/pinpai/pinpaiz1_bj.png)" class="pinpaijg"><a href="#"><img class="fangdanei" style="width:0px; height:0px; left:155.5px; top:155.5px; position:absolute;" src="../images/zaotu/pinpai/pinpaiz1_tc.png" /><img class="fangdawai" style="width:310px; height:310px; position:absolute; left:0px; top:0px;" src="../images/zaotu/pinpai/pinpaixx1.png" /><img src="../images/zaotu/pinpai/pingpaiz4.png" style="width:311px; height:311px; position:absolute; left:0px; top:0px;"   /><img class="pinchu" src="../images/zaotu/pinpai/pinpaichudian.png" /></a></li></ul></div>
</body>
</html>

你不把当前LI的zIndex提高，交叉在起没在最前，肯定会触发out事件.main_pinpai ul li
{
width:311px; height:311px; position:absolute;
}
.pinchu z-index设置了999了
你在 .main_pinpai ul li 是position:absolute;模式
.pinchu 的offsetParent 是 .main_pinpai ul li（是当前图片父级LI）
所以 .pinchu z-index:999 作用的范围是相对“当前图片父级LI”容器内

<!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=gb2312" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/*品牌形象*/
$(document).ready(function(){  $ (".pinchu").hover(function(){
$(this).parent().parent(".pinpaijg").css("z-index","0");$('.main_pinpai ul li').not($(this).parent().parent()).css("z-index","9");
$(this).siblings(".fangdawai").css("visibility","visible");
  });
});
</script>
<style>
.main_pinpai
{
width:476px; height:1461px; position:relative; margin-left:324px;
}
.main_pinpai ul li
{
width:311px; height:311px; position:absolute;
}
.pinchu
{
width:180px; height:180px; position:absolute; left:60px; top:65px; z-index:9999; background:#F00;
}
</style>
</head><body>
<div class="main_pinpai">
<ul>
<li style="left:0px; top:165px; background:#9F9;" class="pinpaijg"></li><li style="left:165px; top:0px; background:#00C;" class="pinpaijg"><a href="#"><img src="../images/zaotu/pinpai/pingpaiz4.png" style="width:311px; height:311px; position:absolute; left:0px; top:0px;"   /><img class="pinchu" src="../images/zaotu/pinpai/pinpaichudian.png" /></a></li></ul></div>
</body>
</html>
我简化了代码我现在要鼠标经过红色让淡绿色盖住蓝色然后红色盖住淡绿色应该怎么改

1 .pinchu(红色) 移出与淡绿色同个offsetParent
2 淡绿色的与蓝色同个offsetParent

如果没改变结构,li的position不是static是没办法的

不改变结构 position是static能改吗？我改不好

position是static就是没法定位，z-index了
回到你原来的问题，一定要实现你说的效果
可以通过mousemove事件的当前鼠标坐标，判断是不是移出你的范围，实现起来有些麻烦的

通过mousemove事件的当前鼠标坐标，判断是不是移出你的范围没明白。。不会。。

通过mousemove事件的当前鼠标坐标是否离开
看下是不是你说的效果<!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=gb2312" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/*品牌形象*/
var rect=[],act;
$( document ).ready( function() {  $ ( ".pinchu" ).hover( function() {
    $( this ).parent().parent( ".pinpaijg" ).css( "z-index","0" );    $( '.main_pinpai ul li' ).not( $( this ).parent().parent() ).css( "z-index","9" );
    $( this ).siblings( ".fangdawai" ).css( "visibility","visible" );    $( this ).siblings( ".fangdanei" ).animate( {
      width:226,
      height:226,
      top:42.5,
      left:42.5
    }, 300
                                              );
    $( this ).siblings( ".fangdawai" ).animate( {
      width:420,
      height:420,
      top:-56.5,
      left:-56.5    }, 300,function() {
      $( this ).siblings( ".fangdawai" ).css( "visibility","hidden" );
    });
     var offset= $(this).offset(),sX=$('body').scrollLeft(),sY=$('body').scrollTop();
     rect=[
      offset.left-sX,
      offset.left+ $(this).width()-sX,
      offset.top-sY,
       offset.top+$(this).height()-sY
     ]
    act=this;
    $( 'body' ).bind( 'mousemove',docMM );
  }
  );

function cc() {
    $( this ).siblings( ".fangdanei" ).stop();
    $( this ).siblings( ".fangdanei" ).animate( {
      width:0,
      height:0,
      top:155.5,
      left:155.5
    }, 300 );
    $( this ).siblings( ".fangdawai" ).stop();
    $( this ).siblings( ".fangdawai" ).animate( {
      width:310,
      height:310,
      top:0,
      left:0
    }, 300                                        );
  }
  function docMM(evt) {
    if( !(
        evt.clientX >=rect[0] &&
        evt.clientX <=rect[1] &&
        evt.clientY >=rect[2] &&
        evt.clientY <=rect[3]
        )
      ){
        $('body').unbind('mousemove',docMM );
        cc.call(act);
      }


  }
});</script>
<style>
.main_pinpai
{
width:476px; height:1461px; position:relative; margin-left:324px;
}
.main_pinpai ul li
{
width:311px; height:311px; position:absolute;
}
.pinchu
{
width:180px; height:180px; position:absolute; left:60px; top:65px; z-index:9999; background:#F00;
}
</style>
</head><body>
<div class="main_pinpai">
<ul>
<li style="left:0px; top:165px; background:url(../images/zaotu/pinpai/pinpaiz1_bj.png)" class="pinpaijg"><a href="#"><img class="fangdanei" style="width:0px; height:0px; left:155.5px; top:155.5px; position:absolute;" src="../images/zaotu/pinpai/pinpaiz1_tc.png" /><img class="fangdawai" style="width:310px; height:310px; position:absolute; left:0px; top:0px;" src="../images/zaotu/pinpai/pinpaixx1.png" /><img src="../images/zaotu/pinpai/pingpaiz4.png" style="width:311px; height:311px; position:absolute; left:0px; top:0px;"   /><img class="pinchu" src="../images/zaotu/pinpai/pinpaichudian.png" /></a></li><li style="left:165px; top:0px; background:url(../images/zaotu/pinpai/pinpaiz1_bj.png)" class="pinpaijg"><a href="#"><img class="fangdanei" style="width:0px; height:0px; left:155.5px; top:155.5px; position:absolute;" src="../images/zaotu/pinpai/pinpaiz1_tc.png" /><img class="fangdawai" style="width:310px; height:310px; position:absolute; left:0px; top:0px;" src="../images/zaotu/pinpai/pinpaixx1.png" /><img src="../images/zaotu/pinpai/pingpaiz4.png" style="width:311px; height:311px; position:absolute; left:0px; top:0px;"   /><img class="pinchu" src="../images/zaotu/pinpai/pinpaichudian.png" /></a></li></ul></div>
</body>
</html>

其实问题很简单，图像有重叠，鼠标放在红色区域右上角(左边)时，触发了放大的动画，但是你的这句代码$(this).parent().parent(".pinpaijg").css("z-index","0");使它的父级容器置底，使其鼠标移出了红色区域，自然就触发了缩小的动画。把显示的顺序调一下就好了。$(this).parent().parent(".pinpaijg").css("z-index","9");
$('.main_pinpai ul li').not($(this).parent().parent()).css("z-index","0");

都不行。。有BUG 算了不做了谢谢你们的帮助

调试易

鼠标经过图片有问题

解决方案 »