CSS Transition - 仅在悬停上的元素 [英] CSS Transition - Fade Element on Hover only
本文介绍了CSS Transition - 仅在悬停上的元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有可能有一个css过渡,褪色元素在悬停,但只是在鼠标离开时隐藏元素。
Is it possible to have a css transition that fades an element in on hover but simply hides the element when the mouse leaves.
hover in = fade for 0.5 seconds | hover out = no fade and instant
i.e. hover in = fade for 0.5 seconds | hover out = no fade and instant
推荐答案
是的,你可以使用CSS3过渡。基本上,你的CSS应该看起来像这样:
Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this:
#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;
}
这里有一个jsFiddle演示:小提琴
And here's a jsFiddle to demonstrate: Fiddle
这篇关于CSS Transition - 仅在悬停上的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文