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

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>

附带说明，对于您的超时，它不起作用，因为在调用 setTimeout() 时，this 的上下文将丢失。您需要bind() 函数或使用箭头函数（就像我一样）。我将超时设置为 5000 而不是 500，这样您就可以更轻松地看到主要焦点。

Answer 2

您有一些问题。首先，如果您想在setTimeout 中引用this，则需要一个变量。其次，不透明度值保存为字符串，所以你必须解析它。

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>