大佬教程收集整理的这篇文章主要介绍了通过过渡更改图像不透明度,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在鼠标悬停时将第一张图片 (img class:top) 的不透明度从 1 更改为 0,并将第二张图片 (img class:bottom) 的不透明度从 0 更改为 1。
我的 HTML
<div class="col classtrans"> <img class="bottom" src="/2.png" /> <img class="top" src="3.png" /> </div>
我的 CSS
.classtrans {
position:relative !important;
margin:0 auto;
height:281px;
wIDth:450px;
}
.classtrans img.top {
position:absolute !important;
left:0;
-webkit-Transition: opacity 1s ease-out;
-moz-Transition: opacity 1s ease-out;
-o-Transition: opacity 1s ease-out;
Transition: opacity 1s ease-out;
}
.classtrans img.bottom {
position:absolute !important;
left:0;
bottom: auto;
opacity:0;
-webkit-Transition: opacity 1s ease-in;
-moz-Transition: opacity 1s ease-in;
-o-Transition: opacity 1s ease-in;
Transition: opacity 1s ease-in;
}
.classtrans img.top:hover {
opacity:0;
}
.classtrans img.bottom:hover {
opacity:1;
}
但它不起作用。 悬停仅适用于第一张图像(顶部),不会更改第二张图像(底部)的不透明度。 请帮帮我。
为此,您可能需要一个可以悬停在其上的内部标签,如下所示:
<div class="col classtrans"> <div class="classtransinner"> <img class="bottom" src="/2.png" /> <img class="top" src="3.png" /> </div> </div>
然后是一些 CSS 代码:
.classtransinner {
display: inline-block;
}
.classtransinner:hover img.bottom {
opacity:1;
}
.classtransinner:hover img.top {
opacity:0;
}
请告诉我这是否有效,如果对您有帮助,请考虑将其标记为“正确”! :D
以上是大佬教程为你收集整理的通过过渡更改图像不透明度全部内容,希望文章能够帮你解决通过过渡更改图像不透明度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。