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

我希望活动元素的颜色在悬停时更改，而在不活动时，悬停颜色应该不同。
在“toggleclass”之后，“highlightbutton”类没有被删除，我似乎无法在单击项时应用代码来更改悬停颜色，当单击返回到默认的未锁定状态时，悬停时它应该会恢复到原始悬停颜色。
这是我的代码：

$(".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;
}

最佳答案

正如@connexo所说，这更像是一个css案例。
您可以为要突出显示的内容添加一个id，请执行以下操作：

.toggle:hover{
    //Colour changing
}

.toggle:active{
    //Colour changing
}

或者您可以向元素添加一个ID，并按以下方式执行：

#toggle:hover{
    //Colour changing
}

关于javascript - 在jQuery中单击和未单击元素时不同的悬停颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53835994/