javascript - 在 Jquery 中单击和未单击元素时不同的悬停颜色

Question

我希望事件元素的颜色在悬停时发生变化，而当它未处于事件状态时，悬停颜色应该不同。

“highlightbutton”类在“toggleclass”之后没有被删除，我似乎无法在单击该元素时应用代码来更改悬停颜色，当它被单击回到默认的未单击状态时，它应该恢复到悬停时的原始悬停颜色。

这是我的代码:

$(".toggle").hover(function() {
    $(this).addClass("highlightbutton");
}, function() {
    $(this).removeClass("highlightbutton");
});

$(".toggle").click(function() {
    $(this).toggleClass("active");
    $(this).removeClass("highlightbutton");
});

CSS

.active {
    background-color: #E8F2FF;
}
.highlightbutton {
    background-color: #E4E4E4;
}

Answer 1

正如@connexo 所说，这更像是一个 css 案例。

您可以为要突出显示的内容添加一个 id，这样做:

.toggle:hover{
    //Colour changing
}

.toggle:active{
    //Colour changing
}

或者您可以向元素添加一个 ID 并按以下方式进行:

#toggle:hover{
    //Colour changing
}