Javascript 如何将图像置于鼠标上方的其他图像之上？

我试图找到解决办法，但找不到。 我有一些图像，每个图像都在另一个图像上。我希望当我将鼠标移到第一个图像上时，后面的图像将位于第一个图像的上方。 例如：

正常： 鼠标悬停：

在基本模式中，第二个和第三个图像位于第一个图像的后面。

---

对不起我的英语，提前谢谢

您可以将jQuery的

hover

事件函数与

over

和

out

处理程序一起使用

从第一个框后面的框开始-隐藏它们

接下来定义一个

onhover

事件，当鼠标悬停时显示它们，当鼠标离开悬停时再次隐藏它们

$（'#1'）。悬停(
函数（）{
$（'.hidden'）.removeClass（'hidden'）.addClass（'visible'）；
},
函数（）{
$（'.visible'）.removeClass（'visible'）.addClass（'hidden'）；
}
)

.box{
边框：纯色2px黑色；
宽度：40px；
高度：40px；
}
.隐藏{
可见性：隐藏；
}
.可见{
可见性：默认；
}

3.
2.
1

此解决方案要求将箱子绝对放置在容器中

var prop=“bottom”，
移动量=50；
$（'.container'）。悬停(
函数（）{
var moved=$（this.find（“.box”）；
对于（var i=（moved.length-1），pad=0；i>=0；i--）{
$（moved[i]）.css（prop，（pad++*moveAmount）+“px”）；
}
},
函数（）{
var moved=$（this.find（“.box”）；
对于（变量i=0；i
.container{
背景色：#eeeeee；
位置：相对位置；
宽度：45px；
高度：45px；
}
.盒子{
背景：红色；
宽度：40px；
高度：40px；
过渡：底部0.3s缓进缓出；
位置：绝对位置；
底部：0px；
}








3.
2.
1.
对于所需效果，只有两张图片足够显示您迄今为止尝试过的效果！我认为他需要图像在
1
后面，意思是
1
在它们上面。在您的示例中，它们只是堆叠起来的，但是隐藏的。