无序列表的列表符号颜色不变

需求:当鼠标经过a时,字和列表符号都变成蓝色

<style>
        li{
     
            list-style-type: decimal;
        }
        a{
     
            text-decoration: none;
            color: black;
        }
        a:hover{
     
            color: blue;
        }
     
    </style>
<body>
    <ul>
        <li><a href="">苹果</a></li>
        <li><a href="">香蕉</a></li>
    </ul>
</body>

无序列表的列表符号颜色不变_第1张图片解决方法:

<style>
        li {
     
            list-style-type: decimal;
        }

        a {
     
            text-decoration: none;
            color: black;
        }

        a:hover {
     
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">苹果</a></li>
        <li><a href="">香蕉</a></li>
    </ul>
    <script>
        var lisA = document.querySelectorAll("li a");
        var lis = document.querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
     
            lisA[i].onmouseover = function () {
     
                lis[i].style.color = "blue";
            }
            lisA[i].onmouseout = function () {
     
                lis[i].style.color = "black";
            }
        }

    </script>
</body>

你可能感兴趣的:(css,javascript)