13

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

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

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

http://jsfiddle.net/L7XCD/

4

2 回答 2

42

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

让我们使用很棒的 Mozilla 文档来解释这一点：

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

我们还使用了转换时间函数（easy、linear、easy-in、easy-out、easy-in-out）

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

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;
}​

由于他正在使用过渡缓入出，我认为使用相同的过渡功能会更好。

有关更多信息，请查看此处的文档

希望能帮助到你！

于 2012-07-07T14:20:50.353 回答
4

http://jsfiddle.net/L7XCD/2/ 只需在没有悬停标签的情况下将过渡效果添加到您的元素

于 2012-07-07T14:21:51.507 回答