Question

此代码在徽标图像顶部旋转的边框正常工作，但如果我将边框的z-index更改为9988，将图像更改为9999，则代码无法正常工作。我错过了什么？我希望边框在图像后面旋转

由于

#logo-position {width: 170px; height: 170px; position: absolute; }
		#mylogo     { width: 170px; height: 170px; position: absolute;}
		#mylogo img {position: absolute;}
		.logoborder {z-index:9999;}	
		.logotext {z-index:9988;}
		.logoborder:hover { -moz-animation: rotate 2s linear infinite;
							-webkit-animation: rotate 2s linear infinite;
							-o-animation: rotate 2s linear infinite;
							-ms-animation: rotate 2s linear infinite;
		}
		@-moz-keyframes rotate {		
			from {-moz-transform: rotate(0deg);}
			to {-moz-transform: rotate(360deg);}
		}
		@-webkit-keyframes rotate {
			from {-webkit-transform: rotate(0deg);}
			to {-webkit-transform: rotate(360deg);}
		}
		@-ms-keyframes rotate {
			from {-ms-transform: rotate(0deg);}
			to {-ms-transform: rotate(360deg);}
		}
			@-o-keyframes rotate {
			from {	-o-transform: rotate(0deg);}
			to {-o-transform: rotate(360deg);}
			}

<body> 
		<div id="logo-position">
			<div id="mylogo">
				<a href="http://www.makepassive.com">
	
					<img class="logoborder" src="http://i.stack.imgur.com/RhC7Z.png" alt="logo_170x170_300px-border" width="170" height="170"/>
					<img class="logotext" src="http://i.stack.imgur.com/PiyVY.png" alt="logo_170x170_300px-text" width="170" height="170"/>
				</a>
			</div>
		</div>
	</body>

Answer 1

问题在于，当您将z-index的{{1}}更改为9999，将.logotext更改为9988时，您基本上将隐藏的边框元素隐藏在图像后面。虽然您的图片是具有透明背景的PNG文件，但它会在.logoborder前面叠加。因此，您永远无法通过鼠标指针找到它。我创建了一个CODEPEN代码示例，并将.logoborder添加到border: 5px solid black;以显示问题。

要解决此问题，您需要将.logotext放在.logotext之前，如下所示：

.logoborder

然后，你改变你的CSS代码：

<img class="logotext" src="http://i.stack.imgur.com/PiyVY.png" alt="logo_170x170_300px-text" width="170" height="170"/>
<img class="logoborder" src="http://i.stack.imgur.com/RhC7Z.png" alt="logo_170x170_300px-border" width="170" height="170"/>

然后它会随你工作。

使用-webkit-rotate时Z-Index无法正常工作

1 个答案: