我有一个带有 div 叠加层的图像。 div 叠加层出现在悬停时。还在悬停上，我想要一个动画效果。问题是，动画效果发生在图像和叠加层上，但我不希望动画效果发生在叠加层上。
此代码有效，但我无法阻止叠加层上出现动画。什么 css 代码会使动画效果只发生在图像上？
所以在下面的代码中，css 在容器图像上工作，但它也在额外层上发生。如何使其仅适用于容器图像？
html
<special class=“container”>
<a href=“#" class=“container-link”>
<img src=“image.jpg" class=“container-image”>
<div class=“extra-layer”></div>
</a>
</special>
CSS
#container {
position: relative;
}
.container ::before {
position: absolute;
-webkit-transform: translate(-60%, -60%);
transform: translate(-60%, -60%);
opacity: .5;
}
.container :hover::before {
-webkit-animation: circle .55s;
animation: circle .55s;
}
最佳答案
您的代码无效。我通过 JSFiddle 测试了它。我想你想要的是这样的
you can refer here for further information
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
关于html - 在 css 悬停效果上，无法选择/应用效果到特定元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59420110/