CSS 过渡效果不起作用

Question

我是 CSS 和 HTML 的新手，并且运行遇到了一个让我完全困惑的问题 - 我在导航中应用的过渡效果bar 好像没有生效。我搜索了一个无济于事的答案，并准备在这一点上打破一些东西。下面是我的 CSS 导航栏。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
}

li {
    display: inline-block;
    font-family: 'Oswald Light', Verdana, Geneva, sans-serif;
    font-size: 20px;
    background-color: #333;
    -webkit-transition: all 0.9s ease;
    -moz-transition: all 0.9s ease;
    -o-transition: all 0.9s ease;
    -ms-transition: all 0.9s ease;
    transition: all 0.9s ease;  
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #6699cc;
}

Answer 1

您需要将转换规则添加到 li a - 这是正在改变颜色的元素，而不是 li!

看这里http://jsbin.com/lufujuzuti/edit?html,css,output

Answer 2

您应该将转换代码替换为 li a{} 所以它会像这样：

li a {
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
-webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 transition: all 0.9s ease;
}

Answer 3

您的 CSS 编辑：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}

li {
 display: inline-block;
 font-family: 'Oswald Light', Verdana, Geneva, sans-serif;
 font-size: 20px;
 background-color: #333;

}

li a {
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 transition: all 0.9s ease;
}

li a:hover {
 background-color: #6699cc;
}

CSS 过渡效果不起作用

CSS transition effect isn't working

html

css

transition