在單擊的事件中不會立即激活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>