CSS 过渡 - 仅在悬停时淡化元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11684895/
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
CSS Transition - Fade Element on Hover only
提问by Marty Wallace
Is it possible to have a css transition that fades an element in on hover but simply hides the element when the mouse leaves.
是否有可能有一个 css 过渡，在悬停时淡入一个元素，但在鼠标离开时简单地隐藏该元素。
i.e. hover in = fade for 0.5 seconds | hover out = no fade and instant
即悬停在 = 淡入淡出 0.5 秒 | 悬停=没有淡入淡出和即时
回答by BenM
Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this:
是的，您可以使用 CSS3 过渡来实现这一点。本质上，你的 CSS 应该是这样的：
#myLink {
opacity: 0;
}
#myLink:hover {
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
And here's a jsFiddle to demonstrate: Fiddle
这里有一个 jsFiddle 来演示：Fiddle
回答by SpaceBeers
Yes, just set the transition on the :hoverrather than the link - http://jsfiddle.net/spacebeers/X4ZqE/
是的，只需在:hover而不是链接上设置过渡- http://jsfiddle.net/spacebeers/X4ZqE/
(in the Fiddle, the link is in the top left of the "result" box)
（在小提琴中，链接位于“结果”框的左上角）
#main-menu li a {
opacity: 0;
}
#main-menu li a:hover{
opacity: 1;
transition: opacity 0.5s ease-in; /* vendorless fallback */
-o-transition: opacity 0.5s ease-in; /* opera */
-ms-transition: opacity 0.5s ease-in; /* IE 10 betas, not needed in final build. */
-moz-transition: opacity 0.5s ease-in; /* Firefox */
-webkit-transition: opacity 0.5s ease-in; /*safari and chrome */
}?
