我正在尝试在悬停菜单项时使用background-color
进行过渡效果,但它不起作用。这是我的CSS代码:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
#nav
div
是一个菜单ul
项目列表。
答案 0 :(得分:474)
据我所知,转换目前适用于Safari,Chrome,Firefox,Opera和Internet Explorer 10 +。
这会在这些浏览器中为您产生淡入淡出效果:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
注意:正如Gerald在评论中指出的那样,如果您将转换放在a
上,而不是放在a:hover
上,它将会淡化为原始颜色当你的鼠标离开链接时。
这也可能派上用场:CSS Fundamentals: CSS 3 Transitions
答案 1 :(得分:70)
对我来说,最好将转换代码与原始/最小选择器放在一起,而不是使用:hover或任何其他其他选择器:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
&#13;
<div id="content">
<div id="nav">
<a href="#link1">Link 1</a>
</div>
</div>
&#13;
答案 2 :(得分:2)
另一种实现此目的的方法是使用animation
,它提供了更多控制权。
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
@keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}