在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ css中設置了transition和hover，但是位置是直接變沒有過度，顏色也

css中設置了transition和hover，但是位置是直接變沒有過度，顏色也沒變。

<!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>
回答
編輯回答
玩控

因為

li:hover{
   ...
}

選擇器的優(yōu)先級是低于id選擇器的優(yōu)先級的，所以過渡動畫就不會生效。
至于為什么位置是直接變化的，是因為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;
        }
2018年6月6日 01:46