0
<!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
    <style type="text/css">
        li{
            width:100px;
            height:30px;
            transition:all 2s linear 0s;
        }
        
        #li1{
            background-color: red;
        }
        #li2{
            background-color: green;
        }
        #li3{
            background-color: blue;
        }
        #li4{
            background-color: orange;
        }
        li:hover{
            background-color:gray;
            position:relative;
            left:10px;
        }
        
    </style>
</head>
<body>
    <ul>
        <li id="li1"></li>
        <li id="li2"></li>
        <li id="li3"></li>
        <li id="li4"></li>
    </ul>
</body>
</html>
2018-04-06 提问
1 个回答
0

因为

li:hover{
   ...
}

选择器的优先级是低于id选择器的优先级的,所以过渡动画就不会生效。
至于为什么位置是直接变化的,是因为li元素默认是没有相对定位的,只有hover的时候才变成了相对定位。所以应该在默认的时候就设置li元素为相对定位,在hover的时候改变它的left值。
综合修改的代码为:

li{
            width:100px;
            height:30px;
            transition:all 2s linear 0s;
            position: relative;
            left: 0;
        }
        
        #li1{
            background-color: red;
        }
        #li2{
            background-color: green;
        }
        #li3{
            background-color: blue;
        }
        #li4{
            background-color: orange;
        }
        #li1:hover,
        #li2:hover,
        #li3:hover,
        #li4:hover{
            background-color:gray;
            left:10px;
        }

撰写答案

推广链接