使用CSS3在图像悬停上淡出淡出？ [英] Fade in fade out on image hover using CSS3?

问题描述

我想知道是否可以在图像上指定一个不相干的类别。

I was wondering if it was possible to state an unhover class at all on an image?

我想要达到的是当有人将鼠标悬停在图片上时将会淡入，然后当它们退出时它会退出？

What I am trying to achieve is when someone hovers over an image it will fade in and then when they unhover it fades back out?

我遇到了我的代码，当有人悬停在一个图像，但我需要它的时候，

Heres my code, I got the fade in to work when someone hovers over an image but I need it too fade out when they unhover... hope this made sense.

http：// jsfiddle .net / L7XCD /

推荐答案

http://jsfiddle.net/L7XCD/1/

我们使用伟大的mozilla文档来解释这一点：

Let's use the great mozilla documentation to explain this:

Transition支持一种控制动画更改速度的方法到CSS属性。

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.

此外，我们还可以在特定时间段内转换属性更改，而不是立即生效。

Also we used the transition timing functions (ease, linear, easy-in, easy-out, easy-in-out)

定时功能（定时功能）使用转换定时功能（轻松，线性，简单易用，易于使用）确定如何计算转变的中间值。可以通过提供由定义立方贝塞尔的四个点定义的相应函数的图来指定定时函数

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

因为他使用了transition-in-out，

Since he was using the transition ease-in-out, I thought it was better to use the same transition function.

有关详细信息，请查看此处的文档

For more information, check the documentation here

希望它有帮助！

这篇关于使用CSS3在图像悬停上淡出淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！