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

Question

新人在这里。

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

https://codepen.io/dwdy250/pen/BxZYEE

处理添加事件监听器和更新方 block 的函数如下:

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

你在每次鼠标悬停事件中重置 div 的样式

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

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