Question

jquery控制z-index的问题

现在我有一个例子 三张一样大小的图片分别是(top:10，left:10)(top:20，left:20)(top:30，left:30)，添加样式position:absolute，z-index:1，使三个图片都脱离正常的文档流层叠显示，利用JQ代码控制三个图片的层叠顺序，修改CSS属性z-index的值最上层的图片z-index:10，其余两张z-index:0，通过图片下方的三个span元素的mouseover进行控制，可是控制的效果不是很理想，预览后只有前两三次切换是正常的后面就不动了，完全不切换，我尝试alert三个图片修改后的z-index，确实是修改成功了，可是就是显示效果一点反应都没有，请问这是什么原因。请高手赐教
jQuery源代码：
$("#sp1").mouseover(function(){
//$("#pig1").css({"position":"absolute","z-index":"10"}).sibings().css("z-index","0");
alert("gfdgdfgfdgfgfggggggggggggggg");
var zindex1=$("#pig1").css("z-index");
var zindex2=$("#pig2").css("z-index");
var zindex3=$("#pig3").css("z-index");
alert("zindex1:"+zindex1+"zindex2:"+zindex2+"zindex3:"+zindex3);
});

$("#sp2").mouseover(function(){
$("#pig2").css({"position":"absolute","z-index":"10"});
$("#pig2").sibings().css("z-index","8");
var zindex1=$("#pig1").css("z-index");
var zindex2=$("#pig2").css("z-index");
var zindex3=$("#pig3").css("z-index");
alert("zindex1:"+zindex1+"zindex2:"+zindex2+"zindex3:"+zindex3);
});

$("#sp3").mouseover(function(){
$("#pig3").css({"position":"absolute","z-index":"10"});
$("#pig3").sibings().css("z-index","8");
var zindex1=$("#pig1").css("z-index");
var zindex2=$("#pig2").css("z-index");
var zindex3=$("#pig3").css("z-index");
alert("zindex1:"+zindex1+"zindex2:"+zindex2+"zindex3:"+zindex3);
});

Answer 1

span{display:inline-block;}
sibings应该是siblings

Answer 2

z-index 你别弄2个0 分开

Answer 3

.css( "zIndex", zIndex )