使用 jquery 将图像从“堆栈”的底部带到顶部答案

【问题标题】：using jquery to bring images from bottom to top of "stack"使用 jquery 将图像从“堆栈”的底部带到顶部
【发布时间】：2013-11-23 03:37:41
【问题描述】：

我有三个重叠的图像。当光标移到其中一个图像上时，我希望该图像跳到堆栈的顶部。我尝试了两种方法：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 开始，所以当函数运行时，每个图像都应该上升到它之上。

我得到了一些行为：中间图像出现在顶部并保持在顶部。

【问题讨论】：

我完全看错了页面上发生的事情。代码确实按预期工作，我有一个我没有意识到的图像形状问题。
然后删除问题谢谢。
@icicleking Shape 问题不谈，你的代码有时只能工作，看看我的回答。

标签： jquery css image hover z-index

【解决方案1】：

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

【讨论】：

不可能是这样，因为“中间图像位于顶部并保持在顶部”的声明。

【解决方案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/

【讨论】：