当我把鼠标移到同一个元素上时，我希望它变得更暗——香草JS

Question

我希望将鼠标悬停在div上，使其每次鼠标悬停时都变暗(如etch-a-ketch(，但我遇到了无法使不透明度多次变暗的问题。

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>