Question

我有一个包含3张图片的网页。当我将鼠标悬停在任何图像上时，它的宽度和高度会增加，z-index也会改变（它会出现在其他图像之上）。问题是，只要我将鼠标移出图像div，其z-index就会立即改变，即其他两个图像位于顶部。我希望图像在尺寸增大和尺寸减小时都位于顶部。这是我的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;
}

Answer 1

这样的事情：

    <!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>

Answer 2

1）同时将transition: all 2s规则添加到div:hover类。

2）您尚未在z-index=0课程中明确声明div。

3）另外，您错过了z-index课程中div的动画效果，这就是我更喜欢transition: all 2s;风格的原因。

如何在转换之前延迟悬停时的z-index更改？

2 个答案: