我有一个包含3个图像的网页。当我将鼠标悬停在任何图像上时，它的宽度和高度都会增加，z索引也会发生变化（它位于其他图像之上）。问题是，一旦我将鼠标移出图像div，它的z索引就会立即发生变化，即其他两个图像位于顶部。我希望图像在大小增大和减小时都位于顶部。这是我的CSS：
div {
position: fixed;
width: 100px;
height: 100px;
transition: width 2s, height 2s;
}
div.image1 {
top: 10px;
transition-timing-function: linear;
content:url("http://freedwallpaper.com/wp-content/uploads/2014/03/4-Nature+Wallpapers+2014-1.jpg");
}
div.image2 {
top: 120px;
transition-timing-function: linear;
content:url("http://stylonica.com/wp-content/uploads/2014/02/nature.jpg");
}
div.image3 {
top: 230px;
transition-timing-function: linear;
content:url("http://feelgrafix.com/data_images/out/2/748315-beautiful-nature-wallpaper.jpg");
}
div:hover {
z-index: 1;
width: 800px;
height: 800px;
}
类似这样的东西：
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style>
div {
position: fixed;
width: 100px;
height: 100px;
transition: z-index 2s, width 2s, height 2s;
}
.image1, .image2, .image3{
z-index: 1;
}
div.image1 {
top: 10px;
transition-timing-function: linear;
content:url("http://freedwallpaper.com/wp-content/uploads/2014/03/4-Nature+Wallpapers+2014-1.jpg");
}
div.image2 {
top: 120px;
transition-timing-function: linear;
content:url("http://stylonica.com/wp-content/uploads/2014/02/nature.jpg");
}
div.image3 {
top: 230px;
transition-timing-function: linear;
content:url("http://feelgrafix.com/data_images/out/2/748315-beautiful-nature-wallpaper.jpg");
}
div:hover {
z-index: 10;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</body>
</html>1）将transition: all 2s规则也添加到div:hover类中。
2） 您尚未在div类中明确声明z-index=0。
3） 另外，您还错过了在div类中为z-index设置动画，这就是为什么我更喜欢transition: all 2s;样式。