CSS 过渡会立即淡出

Question

我知道这是一个常见问题，我已经阅读了很多关于它的信息，只是无法在我的 CSS 代码中实现各种解决方案，请提供建议。

我有一个简单的ul和li元素，淡入效果有效，但淡出效果不起作用。我知道我需要将转换代码放入 ul li 元素的"正常"状态，但它就是不起作用。

   #menu li a{
        color: white;
        text-decoration: none;
        font-family:arial;
        font-size: 14px;
        padding-right: 15px;
    }
    #menu ul li{
        display: inline;
    }
    ul{
        list-style-type: none;
        margin:  0px;
        padding: 0px; 
    }
    #menu ul li a:hover {
        color: dodgerblue;
        -webkit-transition: color 0.3s linear 0s;
        -moz-transition:color 0.3s linear 0s;
        -ms-transition:color 0.3s linear 0s;
        -o-transition:color 0.3s linear 0s;
        transition:color 0.3s linear 0s;
    }

Answer 1

只需将transition属性（和供应商前缀）放在#menu li a选择器本身中，如下所示：

#menu li a {
    color: white;
    text-decoration: none;
    font-family:arial;
    font-size: 14px;
    padding-right: 15px;
    -webkit-transition: color 0.3s linear 0s;
    -moz-transition:color 0.3s linear 0s;
    -ms-transition:color 0.3s linear 0s;
    -o-transition:color 0.3s linear 0s;
    transition:color 0.3s linear 0s;
}
#menu ul li a:hover { color: dodgerblue; }

工作演示。

Answer 2

使用Lea Verou的前缀，然后添加您的代码将如下所示：

#menu li a{
            color: white;
            text-decoration: none;
            font-family:arial;
            font-size: 14px;
            padding-right: 15px;
        }
        #menu ul li{
            display: inline;
        }
        ul{
            list-style-type: none;
            margin:  0px;
            padding: 0px; 
        }
        #menu ul li a:hover {
            color: dodgerblue;
        }
        #menu ul li a {
            transition:color 0.3s linear 0s;
        }

你在这里得到一个CDN版本无前缀