前端html，css实现当鼠标hover的时候置换＜img src＞中的src图片

最新推荐文章于 2025-01-02 16:22:28 发布

呆呆加油呀

最新推荐文章于 2025-01-02 16:22:28 发布

阅读量473

点赞数 3

文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/m0_59157023/article/details/140469233

版权

实现代码：

html代码：

 <img class="default-img" [src]="assetsBaseUrl + 'supplier.svg'" alt="">
 <img class="hover-img" [src]="assetsBaseUrl + 'supplier-hover.svg'" alt="">

css代码：

.content {
    .hover-img {
                display: none;
             }
        &:hover {
             
           .default-img{
                   display: none;
              }
           .hover-img {
                   display: block;
             }
}

.hover-image是默认不显示的，当鼠标悬停在.image-container上时，.default-image会被隐藏，.hover-image会显示出来。