列表项背景上的 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;
}