Question

我有三个重叠的图像。当光标移动到其中一个图像上时，我希望该图像跳到堆栈顶部。我尝试了两种方法：css伪类：hover和jquery。

$('.icon-stack').hover(function() {  
     var index = $(this).css("z-index");  
     $(this).css('z-index',index+=3);},  
function() {  
     var index = $(this).css("z-index");  
     $(this).css('z-index',index-=3);  
 });

更多地谈论它：当鼠标中的底部图像被提升到z-index：4，然后回落到z-index：1。中间图像从2增加到5，顶部图像从z-index：3开始，因此当函数运行时，每个图像都应该高于它。

我有一些行为：中间的图像出现在顶部并保持在顶部。

Answer 1

如果没有看到你的标记和CSS，很难确定，但我强烈怀疑问题是z-index被忽略，因为元素static的默认定位。您应该尝试将position: relative设置为CSS中的相关元素。

Answer 2

$(this).css("z-index")返回一个字符串。所以"3" + 3 = 33等。-=确实有效，因为-对字符串没有意义。使用parseInt。

$('.icon-stack').hover(function() {  
     var index = parseInt($(this).css("z-index"), 10);  
     $(this).css('z-index',index+3);},  
function() {  
     var index = parseInt($(this).css("z-index"), 10);  // not strictly necessary
     $(this).css('z-index',index-3);  
});

我还删除了=并将其设为+和-，因为不需要作业。

http://jsfiddle.net/7qGy5/

使用jquery从“堆栈”的底部到顶部引入图像

2 个答案: