Question

我希望将鼠标悬停在上面的div每次鼠标悬停时都会变暗（例如etch-a-sketch），但是我遇到了一个问题，即不使不透明度能够变暗一次以上

for (var i = 0; i < (16 * 16); i++) {
  var iDiv = document.createElement('div');
  iDiv.textContent = "  ";
  iDiv.id = 'block';
  iDiv.className = 'block';
  var container = document.getElementById("container");

  container.appendChild(iDiv);

  iDiv.addEventListener("mouseover", function(event) {
    // highlight the mouseover target
    this.style.backgroundColor = "black";
    this.style.opacity += 0.2;

    // reset the color after a short delay
    setTimeout(function() {
      this.target.style.color = " ";
    }, 500);
  }, false);
}

.container {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: repeat(16, 1fr);
  width: 95%;
  height: 95%;
  border: 1px solid black;
  margin: auto;
}

#block {
  background: white;
  padding: 12.5px;
}

#block:hover {
  background: ;
}

.color {
  background: rgba {
    0,
    0,
    0,
    0.1
  }
}

<div class="container" id="container"></div>

Answer 1

问题在于，opacity变成了string，所以当您添加0.2而不是获取0.4时，您会得到0.20.2。

您需要先在其上parseFloat。

for (let i = 0; i < (16*16); i++) {
  const iDiv = document.createElement('div');
  const container = document.getElementById("container");
  iDiv.textContent = "  ";
  iDiv.id = 'block';
  iDiv.className = 'block';

  container.appendChild(iDiv); 

  iDiv.addEventListener("mouseover", function(event) {   
    // highlight the mouseover target
    this.style.backgroundColor = "black";
    this.style.opacity = (parseFloat(this.style.opacity) || 0) + 0.2;

    // reset the color after a short delay
    setTimeout(() => {
      this.style.backgroundColor = "none";
      this.style.opacity = 0;
    }, 5000);
  }, false);
}

.container {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: repeat(16, 1fr);
  width: 95%;
  height: 95%;
  border: 1px solid black;
  margin: auto;
}

#block{
  background: white;
  padding: 12.5px;
}

#block:hover{
  background:;
}

.color{
  background: rgba{0,0,0,0.1}
}

<div id="container" class="container"></div>

请注意，对于您的超时来说，它不起作用，因为在调用this时setTimeout()的上下文将丢失。您需要bind()函数或使用箭头函数（就像我一样）。我将超时时间从5000更改为500，因此您可以更轻松地查看主要焦点。

Answer 2

您遇到了一些问题。首先，如果要引用this内的setTimeout，则需要一个变量。其次，不透明度值另存为字符串，因此您必须对其进行解析。

for (var i=0; i<(16*16); i++){
  var iDiv = document.createElement('div');
  iDiv.textContent = "  ";
  iDiv.id = 'block';
  iDiv.className = 'block';
  var container = document.getElementById("container");

  container.appendChild(iDiv); 

  iDiv.addEventListener("mouseover", function( event ) {   
    // highlight the mouseover target
    var that = event.target;
    that.style.backgroundColor = "black";    
    if(parseFloat(that.style.opacity)) {
      that.style.opacity = parseFloat(that.style.opacity) + 0.2;
    } else {
      that.style.opacity = 0.2;
    }

    // reset the color after a short delay
    setTimeout(function() {
      that.style.color = " ";
    }, 500);
  }, false);

 }

    .container{
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: repeat(16, 1fr);
  width: 95%;
  height: 95%;
  border: 1px solid black;
  margin: auto;
}

#block{
  background: white;
  padding: 12.5px;
}

#block:hover{
  background:;
}

.color{
  background: rgba{0,0,0,0.1}
}

<div class="container" id="container">
</div>

当我将鼠标悬停在同一元素上时，我希望它变暗-Vanilla JS

2 个答案: