需要在 JS 中每次鼠标悬停时 div 不透明度属性逐渐提高

Question

这里是菜鸟。

我正在制作一个草图项目，但我遇到了绊脚石。一切正常，除了当我用鼠标重新访问它们时我无法让方块变暗。目的是使不透明度在每次访问广场时变暗 10%。我在代码笔中编译了代码：

处理添加事件侦听器和更新方块的函数如下：

function addListeners(){  //adds event listener and function that colors squares

    squares.forEach((squares) => {

        squares.addEventListener('mouseover', () =>{

            squares.setAttribute("style","background-color:black; display:inline-block;");
              squares.style.height = squareSize;
            squares.style.width = squareSize;
            squares.style.opacity += 0.1;

        });
    });
}

我调查了其他人在同一个项目上的工作，他们似乎使用了 this.style.opacity = Number(this.style.opacity) + 0.1;然而，当我使用它时，只是得到 'this.style is undefined'... 我想我还不太明白如何或为什么要使用 'this'。

Answer 1

使用 backgroundColor 怎么样？您可以减小 r、g 和 b 值以从灰色变为黑色

var r = 64;
var g = 64;
var b = 64;

function addListeners(){  //adds event listener and function that colors squares

    squares.forEach((squares) => {

        squares.addEventListener('mouseover', () =>{

            squares.setAttribute("style","display:inline-block;");


      squares.style.height = squareSize;
      squares.style.width = squareSize;
      squares.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
      r -= 4;
      g -= 4;
      b -= 4;
    });
});

}

Answer 2

您将在每次鼠标悬停事件

中重置 div 上的样式

squares.setAttribute("style","background-color:black; display:inline-block;");

尝试删除这行代码并以不同的方式工作

需要在 JS 中每次鼠标悬停时 div 不透明度属性逐渐提高

Need to make a div opacity property progressively higher on each mouseover in JS

javascript

css

event-handling

opacity

需要在 JS 中每次鼠标悬停时 div 不透明度 属性 逐渐提高

Need to make a div opacity property progressively higher on each mouseover in JS

javascript

css

event-handling

opacity

需要在 JS 中每次鼠标悬停时 div 不透明度属性逐渐提高