背景颜色的过渡

我试图在悬停菜单项时使用背景色制作过渡效果，但它不起作用。这是我的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是一个菜单项列表。

当前回答

对我来说，最好将过渡代码与原始/最小选择器放在一起，而不是与:hover或任何其他额外的选择器放在一起:

#内容#导航{ background - color: # FF0; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms线性; -o过渡:background-color 1000ms线性; -ms-transition: background-color 1000ms线性; 过渡:背景色1000ms线性; ｝ #内容#导航a:悬停{ background - color: # AD310B; ｝ < div id = "内容" > < div id = "导航" > <a href="#link1">Link 1</a> . < / div > < / div >

2015-07-03 08:46:09

其他回答

据我所知，目前Safari、Chrome、Firefox、Opera和Internet Explorer 10+都支持过渡功能。

这应该会在以下浏览器中产生渐隐效果:

一个{ background - color: # FF0; ｝答:{徘徊 background - color: # AD310B; -webkit-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms线性; 过渡:背景色1000ms线性; ｝ < / > < >导航链接

注意:正如Gerald在评论中指出的那样，如果你把过渡放在a上，而不是放在a:hover上，当你的鼠标离开链接时，它会变回原来的颜色。

这可能也会派上用场:CSS基础:css3过渡

ps.

正如下面@gak的评论

您还可以将过渡放到content #nav a中，以便当用户将鼠标移离链接时，将其淡出到原始内容

2010-12-10 21:02:08

对我来说，最好将过渡代码与原始/最小选择器放在一起，而不是与:hover或任何其他额外的选择器放在一起:

2015-07-03 08:46:09

另一种实现方法是使用动画，它提供了更多的控制。

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

#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;
}

2020-11-20 10:46:48

你可以简单地设置过渡到一个标签样式和改变背景悬停

一个{ background - color: # FF0; 过渡:背景色300ms线性; -webkit-transition: background-color 300ms linear; -ms-transition: background-color 300ms线性; -o过渡:background-color 300ms线性; -ms-transition: background-color 300ms线性; ｝答:{徘徊 background - color: # AD310B; ｝ < / > < >链接

2022-12-11 08:26:13

背景颜色的过渡

推荐文章

最新文章

标签