Css div轻松进出
Css div轻松进出
提问于 2019-10-05 08:23:26
我试图让我的div淡入淡出，只使用css。谁能帮帮我。
.overlay {
display: none;
}
.image:hover .overlay {
box-sizing: border-box;
display: block;
height: 100%;
left: 0;
-moz-box-sizing: border-box;
position: absolute;
top: 0;
-webkit-box-sizing: border-box;
width: 100%;
}
回答 1
Stack Overflow用户
发布于 2019-10-05 08:48:18
我建议使用可以用transition设置动画的opacity属性。
尝试以下操作：
#container {
position: relative;
width: 50px;
height: 50px;
}
img {
width: 100%;
height: 100%;
background-color: black;
}
.overlay {
position: absolute;
background-color: blue;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out; /* for compatibility with older versions of Opera */
-ms-transition: opacity 1s ease-in-out; /* for compatibility with IE and Edge */
-moz-transition: opacity 1s ease-in-out; /* for compatibility with Firefox */
-webkit-transition: opacity 1s ease-in-out; /* for compatibility with Chrome, Safari... */
}
#container:hover>.overlay {
opacity: 1;
}<p>Try hovering over the image:</p>
<div id="container">
<img>
<div class="overlay"></div>
</div>
注意：<img>是一个自包含的标签。也就是说，它不能包含元素。您将需要一个包装div，如示例所示，其中包含一个同时包含您的图像和覆盖的容器。
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58244413
复制相关文章
相似问题
腾讯云开发者
