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

<强> WORKING DEMO

Answer 2

使用来自lea verou的prefixfree添加您的代码将如下所示：

#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版本prefixfree

CSS过渡立即淡出

2 个答案: