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

Question

我想要 div，我将鼠标悬停在它上面，每次我鼠标悬停时它都会变暗（比如蚀刻素描），但我有运行无法制作的问题不透明度可以变暗不止一次。

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

您遇到了一些问题。如果要在 setTimeout 中引用 this，首先需要一个变量。其次，opacity值保存为字符串，所以你要解析它。

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

When i mouseover the same element i want it to get darker - Vanilla JS

javascript

mouseover

opacity