CSS 使用 CSS3 在图像悬停时淡入淡出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11375724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade in fade out on image hover using CSS3?
提问by user1506962
I was wondering if it was possible to state an unhover class at all on an image?
我想知道是否可以在图像上完全说明 unhover 类？
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.
这是我的代码，当有人将鼠标悬停在图像上时，我让淡入工作，但是当他们取消悬停时我也需要淡出......希望这是有道理的。
回答by Luis
This should work for you! http://jsfiddle.net/L7XCD/1/
这应该对你有用！http://jsfiddle.net/L7XCD/1/
Let's use the great mozilla documentation to explain this:
让我们使用伟大的 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.
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)
我们还使用了转换时间函数（ease、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
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
CCSmarkup:
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;
}?
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
Hope it helps!
希望能帮助到你！
回答by Chris
http://jsfiddle.net/L7XCD/2/Just add the transition effect to your element without the hover-tag
http://jsfiddle.net/L7XCD/2/只需将过渡效果添加到您的元素，无需悬停标签
