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时它们才会变成红色。 divs之外的指针？是什么原因？我该怎么做立即突出显示？
（2）如何仅突出显示我点击了三个？我只想同时突出显示一个div 时间。

Answer 1

您的<div id="div1" onclick="highlight1()">Division</div> <div id="div2" onclick="highlight2()">Division</div> <div id="div3" onclick="highlight3()">Division</div>使:hover悬停，甚至div .red悬停（黄色）而不是红色。如果需要，您也可以将悬停的div divs设为红色。

如果您一次只希望变红，则可以在使用.red之前从所有div中删除.red。

使用类比使用单独的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;
}

Answer 2

您可以通过应用div.red:hover来做到这一点，实际上是通过优先使用div:hover的{{1}}覆盖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;
}

在click事件中，classList.add（）不会立即激活

2 个答案: