列表项背景上的 CSS 过渡

Question

我经常使用 CSS 转换，但出于某种原因我无法让它们在简单的无序列表上工作。我在这里创建了一个演示:http://jsfiddle.net/79NhC/

在列表项上，我有以下 css:

#servicesBox li {
    border-bottom:1px solid #eeeeee; 
    padding:10px 0 10px 10px;  
    webkit-transition: background 0.2s; 
    moz-transition: background 0.2s; 
    ms-transition: background 0.2s; 
    o-transition: background 0.2s; 
    transition: background 0.2s; 
}​

出于某种原因，当用户将鼠标悬停在列表项上时，背景不会优雅地淡入。有什么原因吗？提前致谢

Answer 1

您需要在所有特定于浏览器的转换声明之前放置一个-。

所以，像这样:

#servicesBox li
{
    border-bottom:1px solid #eeeeee;
    padding:10px 0 10px 10px;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -ms-transition: background 0.2s;
    -o-transition: background 0.2s;
    transition: background 0.2s;
}