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