css - 使用 CSS3 在图像悬停时淡入淡出？

Question

我想知道是否可以在图像上声明一个悬停类？

我想要实现的是当有人将鼠标悬停在图像上时它会淡入，然后当他们将鼠标悬停在图像上时它会淡出？

这是我的代码，当有人将鼠标悬停在图像上时，我可以淡入淡出，但当他们取消悬停时，我也需要它淡出……希望这是有道理的。

http://jsfiddle.net/L7XCD/

Answer 1

这应该适合你! http://jsfiddle.net/L7XCD/1/

让我们使用出色的 mozilla 文档来解释这一点:

Transition 提供了一种控制动画更改 CSS 属性速度的方法。您可以在指定的时间段内过渡属性更改，而不是让动画更改立即生效。

我们还使用了过渡时间函数(缓动、线性、易入、易出、易入出)

时序函数决定如何计算转换的中间值。可以通过提供相应函数的图形来指定计时函数，由定义立方贝塞尔曲线的四个点定义

CCS 标记:

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}​

因为他使用了缓入缓出过渡，所以我认为使用相同的过渡函数会更好。

有关更多信息，请查看 documentation here

希望对您有所帮助!