如何使用javascript覆盖css？

我创建了一个包含3个方形图像的html页面，每个图像都位于复选框标签中。
我创建了一个JavaScript函数，用于检查选中了多少复选框。
我在每个输入（这是一个复选框）上添加一个事件侦听器，其目标是将选中复选框的数量限制为2。
我使用CSS，所以当图像被选中或悬停时，会出现一个红色边框

我的问题是，当我取消选中一个图像时，因为我的鼠标仍在图像上，我无法看到它被取消选中，直到我的鼠标不在图像上

那么，即使鼠标仍在图像上，当图像未选中时，如何覆盖CSS并隐藏或删除边框呢？（我不知道任何jQuery，所以请不要在其中给出解决方案）

功能检查时间（复选框）{
返回复选框
.map（复选框=>document.getElementById（复选框）.checked）
.减少（（x，y）=>x+y）
}
让徽标=[“绿色”、“黄色”、“蓝色”]
对于（让logo成为logo中的logo）{
logo=document.getElementById（logo）
logo.addEventListener（'change'，e=>{
e、 预防默认值（）
如果（徽标已选中）{
如果（检查时间（徽标）>2）{
logo.checked=false
}
}
否则{
}
})
}

#标志{
显示器：flex；
证明内容：中心；
}
.标志{
显示：无；
}
.标志标签{
显示：内联块；
利润率：10px；
文本对齐：居中；
}
.徽标：选中+.徽标标签>img.徽标：悬停+.徽标标签>img{
边框：实心2px红色；
}

绿色


黄色的


蓝色

我认为问题与css样式有关，因为当鼠标悬停在图片上时，您正在图片周围显示边框。 请通过删除：hover来更改css

.logo:checked + .logo-label>img{
   border: solid 2px red;
}

下面是修改过的代码片段

功能检查时间（复选框）{
返回复选框
.map（复选框=>document.getElementById（复选框）.checked）
.减少（（x，y）=>x+y）
}
让徽标=[“绿色”、“黄色”、“蓝色”]
对于（让logo成为logo中的logo）{
logo=document.getElementById（logo）
logo.addEventListener（'change'，e=>{
e、 预防默认值（）
如果（徽标已选中）{
如果（检查时间（徽标）>2）{
logo.checked=false
}
}
否则{
}
})
}

#徽标{
显示器：flex；
证明内容：中心；
}
.标志{
显示：无；
}
.标志标签{
显示：内联块；
利润率：10px；
文本对齐：居中；
}
.徽标：选中+.徽标标签>img{
边框：实心2px红色；
}

绿色


黄色的


蓝色

您只需使用

style.setProperty（string，string）

。第一个参数是CSS属性，第二个参数是CSS值。它们都需要是

字符串

，才能工作

let element = document.getElementById("element-id")

element.style.setProperty('color', '#ffffff');

要知道鼠标是否仍悬停在元素上，可以在元素上创建事件侦听器

element.addEventListener("mouseover", () => {
    element.style.setProperty('color', '#ffffff');
});

element.addEventListener("mouseout", () => {
    element.style.setProperty('color', '#000000');
});

---

我希望它能帮助你！快乐编码

这是一个更面向js的解决方案，但我想它可以为您工作

我在

img

上使用

mouseenter

和

mouseleave

模拟悬停

在

img

上增加一个

点击
事件，这样如果选中
徽标
并点击
img
，则
边框
将设置为
无
其他
边框
将设置为
实心2px红色


功能检查时间（复选框）{
返回复选框
.map（复选框=>document.getElementById（复选框）.checked）
.减少（（x，y）=>x+y）
}
让徽标=[“绿色”、“黄色”、“蓝色”]
对于（让logo成为logo中的logo）{
logo=document.getElementById（logo）
logo.addEventListener（'change'，e=>{
e、 预防默认值（）
如果（徽标已选中）{
如果（检查时间（徽标）>2）{
logo.checked=false
}
}
否则{
}
})
const image=logo.nextElementSibling.firstElementChild；
image.addEventListener（'mouseenter'，e=>{
如果（！logo.checked）{
image.style.border='solid 2px red'；
}
})
image.addEventListener（'mouseleave'，e=>{
如果（！logo.checked）{
image.style.border='none'；
}
})
image.addEventListener（'click'，e=>{
如果（徽标已选中）{
image.style.border='none'；
}
否则{
image.style.border='solid 2px red'；
}
})
}
#徽标{
显示器：flex；
证明内容：中心；
}
.标志{
显示：无；
}
.标志标签{
显示：内联块；
利润率：10px；
文本对齐：居中；
}
.徽标：选中+.徽标标签>img{
边框：实心2px红色；
}