CSS Transition - 仅在悬停上的元素 [英] CSS Transition - Fade Element on Hover only

问题描述

有可能有一个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屋！