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

Question

 function highlight1(){ document.getElementById("div1").classList.add("red"); } function highlight2(){ document.getElementById("div2").classList.add("red"); } function highlight3(){ document.getElementById("div3").classList.add("red"); } 

 div{ display: inline-block; border: 1px solid black; height: 100px; width: 100px; } div:hover{ background: yellow; } .red{ background: red; } 

 <div id="div1" onclick="highlight1()">Division</div> <div id="div2" onclick="highlight2()">Division</div> <div id="div3" onclick="highlight3()">Division</div> 

我是CSS的新手，我对代码有两个问题。

• （1）当我点击div时，它们不会变为红色，直到我将指针移到div之外？ 是什么原因？ 如何立即突出显示？
• （2）我怎样才能突出显示我点击的三个div？ 我只想同时突出一个div。

Answer 1

你的:hover正在制作悬停的div ，即使是.red div ，也会出现徘徊（黄色）而不是红色。 如果你愿意的话，你也可以.red红色.red divs red。

如果你只想要一个是红色的时间，你可以删除.red从所有div使用前classList.add 。

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

 const divs = document.querySelectorAll('.box'); function reset(i) { divs.forEach(div => div.classList.remove("red")); divs[i].classList.add('red'); } 

 .box { display: inline-block; border: 1px solid black; height: 100px; width: 100px; } .box:hover { background: yellow; } .red, .red:hover { background: red; } 

 <div class="box" onclick="reset(0)">Division</div> <div class="box" onclick="reset(1)">Division</div> <div class="box" onclick="reset(2)">Division</div> </html> 

Answer 2

你可以通过应用， div.red:hover div:hover这样做你实际上覆盖了div:hover with div.red:hover优先级div.red:hover

 function highlight1(){ document.getElementById("div1").classList.add("red"); } function highlight2(){ document.getElementById("div2").classList.add("red"); } function highlight3(){ document.getElementById("div3").classList.add("red"); } 

 div{ display: inline-block; border: 1px solid black; height: 100px; width: 100px; } div:hover{ background: yellow; } div.red:hover,.red{ background: red; } 

 <div id="div1" onclick="highlight1()">Division</div> <div id="div2" onclick="highlight2()">Division</div> <div id="div3" onclick="highlight3()">Division</div>