CSS 过渡 - 仅在悬停时淡入淡出元素
Posted
技术标签:
【中文标题】CSS 过渡 - 仅在悬停时淡入淡出元素【英文标题】:CSS Transition - Fade Element on Hover only 【发布时间】: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 */
【讨论】:
以上是关于CSS 过渡 - 仅在悬停时淡入淡出元素的主要内容,如果未能解决你的问题,请参考以下文章
在 css jQuery 中应用淡入淡出到粘性导航的过渡淡入淡出