javascript - HTML，CSS。 mouseout 时将 div 背景颜色恢复为原始颜色(使用 bg img)

Question

我有一组 div，它们具有相同的父级和背景图像。我有一个鼠标悬停事件来更改 div 的颜色。当 mouseout 发生时，我希望 div 具有其原始颜色。问题是 div“颜色”不应该是白色或红色或特定颜色之类的东西。它是该 div 后面的父 bg 图像的一部分。每个 div(就像一个正方形)位于父级背景图像的顶部。我想让那些 div 恢复发生 mouseout 时它们位于父级之上的 bg 图像部分。

div.onmouseover = function() {   
   this.style.backgroundColor = "red"; // Ok
}
div.onmouseout = function () {
   //change div background to that specific part of parent bg image
}

有人可以给我一些关于如何做到这一点的提示/策略吗？

Answer 1

我建议使用类和 ':hover' 属性，但是如果你想直接设置样式，你可以使用 'transparent' 或 rgba 将背景设置为透明

this.style.backgroundColor = "transparent"

或者

this.style.backgroundColor = rgba(0,0,0,0);