CSS 过渡 - 仅在悬停时淡入淡出元素答案

【问题标题】：CSS Transition - Fade Element on Hover onlyCSS 过渡 - 仅在悬停时淡入淡出元素
【发布时间】：2012-07-25 23:02:52
【问题描述】：

是否有可能有一个 css 过渡，在悬停时淡入元素，但在鼠标离开时简单地隐藏元素。

即悬停 = 淡入淡出 0.5 秒 |悬停 = 没有淡入淡出和即时

【问题讨论】：

【解决方案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

【讨论】：

感谢@Rich Bradshaw 使用浏览器特定前缀进行编辑。
我认为 #myLink 悬停时没有使用过渡就足够了

【解决方案2】：

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

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

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

【讨论】：