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

最新推荐文章于 2023-11-06 16:11:46 发布

ohmorning

最新推荐文章于 2023-11-06 16:11:46 发布

阅读量858

点赞数

文章标签： css javascript

本文链接：https://blog.csdn.net/qq_41818857/article/details/104107059

版权

需求：当鼠标经过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>

在这里插入图片描述 解决方法：

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

ohmorning

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无序列表的列表符号颜色不变

需求：当鼠标经过a时，字和列表符号都变成蓝色<style> li{ list-style-type: decimal; } a{ text-decoration: none; color: black; } a:hover{ ...
复制链接

扫一扫