使用 CSS 完成悬停后如何淡出

Posted 2023-03-06

【中文标题】使用 CSS 完成悬停后如何淡出

【英文标题】：How to fade out after hover is done using CSS

【发布时间】：2013-05-28 13:19:51

【问题描述】：

我有一张图片，它的背景颜色在悬停时会发生变化。

改变颜色需要 1 秒钟，但是一旦骏马移出图像，它就会变回来而没有任何效果。

我怎样才能使背景颜色淡出？

CSS：

.latestTrack 
    margin:80px 0 0 0 !important;

.latestTrack img 
    float:right;
    margin-right:50px !important;

.latestTrack img:hover
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    background-color:#f7710f;

HTML：

 <img src="img/SocIco/soundcloud-large.png" />

【参考方案1】：

你忘记了缓出部分：

.latestTrack img 
   float:right;
   margin-right:50px !important;
   -webkit-transition: all 1s ease-out;
   -moz-transition: all 1s ease-out;
   -o-transition: all 1s ease-out;
   -ms-transition: all 1s ease-out;
   transition: all 1s ease-out;

jsFiddle example here.

【讨论】：

完美。非常感谢。