• 1
  • 新人请关照

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>
阅读 1.5k
评论
    1 个回答

    因为

    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;
            }
      撰写回答

      登录后参与交流、获取后续更新提醒