Javascript 悬停/单击时更改颜色的CSS问题

var$=function（id）{returndocument.getElementById（id）；}；
函数generateArtiles（）{
for（设i=1；i<7；i++）{
var div=document.createElement（'div'）；
div.id=“at”+i；
div.addEventListener（“单击”，函数（）{build（i）}）；
$（“altartiles”）.appendChild（部门）；
}
}
函数构建（tilenumber）{
var tileId=“a”+tilenumber；
$（“altartiles”）.className=“红色”；
$（tileId）.style.borderColor=“#fff”；
}

#altartiles{
位置：绝对位置；
顶部：10px；
左：10px；
显示：网格；
网格模板列：34px 34px 34px；
网格模板行：63px 63px；
栅极间隙：8px 6px；
}
#altartiles>div{
背景色：#000；
边框：2个红色虚线；
}
#altartiles>div:悬停{
边框颜色：#fff；
}
.red>div{
边框：2个红色虚线；
边框颜色：红色；
}
.red>div:悬停{
边框颜色：#fff；
}

---

您是否尝试过使用

:active

装饰器而不是添加/删除类

.parentDiv > div {
    border: 2px solid red;
}
.parentDiv > div:hover, div:active {
    border-color: white;
}

---

查看代码段后更新：

var$=function（id）{returndocument.getElementById（id）；}；
函数generateArtiles（）{
for（设i=1；i<7；i++）{
var div=document.createElement（'div'）；
div.id=“a”+i；
div.onclick=函数（）{
重置瓷砖（）；
this.style.borderColor='白色'；
}
$（“altartiles”）.appendChild（部门）；
}
}
函数resetTiles（）{
for（设i=1；i<7；i++）{
$（“a”+i）.style.borderColor=''；
}
}

#altartiles{
位置：绝对位置；
顶部：10px；
左：10px；
显示：网格；
网格模板列：34px 34px 34px；
网格模板行：63px 63px；
栅极间隙：8px 6px；
}
#altartiles>div{
背景色：#000；
边框：2个红色虚线；
}
#altartiles>div:悬停{
边框颜色：白色；
}

是否已设置边框：1px实心如果未设置边框权重，则颜色将不会反射。如果可能的话，创建代码段。是的，我先设置好了！我更新了我的帖子以反映这一点。如果您可以使用stackoverflow snippet选项提供完整的代码段。这将更容易帮助。对不起，我没有看到任何地方的代码片段选项？看这个截图，我试过了。不起作用。希望收到代码片段。您也可以继续使用现有的功能，但可以在divs中添加一个onBlur（）事件函数，该函数可以将颜色设置回原来的状态。它返回一个错误，虽然我没有在我自己的机器上获得。。不知道为什么，是的！非常感谢。完全没有想到只是完全删除边界，然后再添加它。。