通过过渡更改图像不透明度

Posted 2023-03-06

【中文标题】通过过渡更改图像不透明度

【英文标题】：Change image opacity with transition

【发布时间】：2021-05-11 00:17:57

【问题描述】：

我想在鼠标悬停时将第一张图片 (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;

但它不起作用。 悬停仅适用于第一张图像（顶部），不会改变第二张图像（底部）的不透明度。 请帮帮我。

【参考方案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