Question

是否可以进行css过渡，在悬停时淡化元素，但只需在鼠标离开时隐藏元素。

即。悬停在=淡出0.5秒|徘徊=没有褪色和瞬间

Answer 1

是的，您可以使用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;
}

这里有一个jsFiddle演示：Fiddle

Answer 2

是的，只需在:hover上设置过渡而不是链接 - http://jsfiddle.net/spacebeers/X4ZqE/

（在小提琴中，链接位于“结果”框的左上角）

#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 */
}

CSS Transition - 仅在悬停时淡化元素

2 个答案: