Javascript classList.add（）在单击的事件中未立即激活

函数highlight1（）{
document.getElementById（“div1”）.classList.add（“红色”）；
}
函数highlight2（）{
document.getElementById（“div2”）.classList.add（“红色”）；
}
函数highlight3（）{
document.getElementById（“div3”）.classList.add（“红色”）；
}

div{
显示：内联块；
边框：1px纯黑；
高度：100px；
宽度：100px；
}
div:悬停{
背景：黄色；
}
瑞德先生{
背景：红色；
}

分部
分部
除法

您可以通过应用，

div.red:hover

这样做实际上是用

div.red:hover

优先排序

div.red:hover

函数highlight1（）{
document.getElementById（“div1”）.classList.add（“红色”）；
}
函数highlight2（）{
document.getElementById（“div2”）.classList.add（“红色”）；
}
函数highlight3（）{
document.getElementById（“div3”）.classList.add（“红色”）；
}

div{
显示：内联块；
边框：1px纯黑；
高度：100px；
宽度：100px；
}
div:悬停{
背景：黄色；
}
红色分区：悬停，.red{
背景：红色；
}

分部
分部
分区

您的

：悬停

使悬停的

div

s，甚至是

。红色

div

s显示为悬停（黄色），而不是红色。如果需要，也可以将悬停的

.red

divs设置为红色

如果您一次只希望一个为红色，则可以在使用

classList.add之前从所有div中删除
.red

使用类也比使用单个
id
s更合适，因为元素是集合的一部分，而不是以某种方式唯一：


const divs=document.queryselectoral（'.box'）；
功能复位（一）{
div.forEach（div=>div.classList.remove（“红色”）；
divs[i].classList.add（'red'）；
}
.box{
显示：内联块；
边框：1px纯黑；
高度：100px；
宽度：100px；
}
.box:悬停{
背景：黄色；
}
红色
红色：悬停{
背景：红色；
}
分部
分部
分部
可能是因为当您在
div
上方时，
div:hover
仍在应用，因此只有当您离开
div
且
悬停
背景消失时，您才会看到红色。