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

问题描述

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

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...