Javascript 如何在单击时为div提供悬停和活动状态

我有一个黑色的div，当我在上面悬停时，它会变成绿色。单击时，我希望它也保持绿色

正常状态：黑色

悬停状态：绿色

活动状态：绿色

当它处于活动状态时（绿色），我想将鼠标悬停在它上面，这会使div再次变黑

我似乎无法使这个活动状态正常工作，反之亦然

提前谢谢

---

这是我的小提琴：

只需在

.active

类上添加

状态的样式（注意，我使用的是
番茄
而不是
黑色
，因为这是您在演示中使用的颜色）：

#配置文件。活动：悬停{
背景：番茄；
}


但我不确定您希望在这里实现什么：

$('#profile').removeClass('active');
$(this).addClass('active');

如果希望元素在每次单击时打开和关闭
.active
，只需：

$(this).toggleClass('active');

创建一个包含所需样式的类
.active
，并使用jQuery将其添加到div中

您可以在这两种状态下轻松设置div的样式

.normal {background-color:black}
.normal:hover {background-color: green}
.active {background-color: green}
.active:hover {background-color: black}

假设您有以下div

<div id="divSample"></div>

你可以在这里看到：

希望这有帮助
 在纯CSS中不使用jQuery也可以做到这一点。为您的DIV指定一个tabIndex，以便它可以接收焦点：

<div id="profile" tabindex="0"></div>

演示：

这样，单击后颜色“粘贴”。（如果我正确理解你的要求）。如果您单击别处-颜色根据代码返回原始
，您将拥有多个相同的ID
#profile
，但请记住ID必须是唯一的当其处于活动状态（绿色）时，我想将鼠标悬停在其上。。。这有点让人困惑，当它处于活动状态时，这意味着你的鼠标应该被按住，并且可能仍然悬停在div上。这意味着在活动状态下它是绿色的。但当再次将鼠标悬停在它上面时，它将变为黑色，再次单击它，它将保持黑色。@KingKing我后来看到了是的。我太高兴了，它成功了！谢谢您最好使用tabindex=“0”，这样就不会干扰页面中的常规“选项卡流”。这与我的问题很接近。但是我不想点击页面上的其他地方，只想点击DIV使其变回原来的状态。@Junske在什么条件下？您单击div，但仍将鼠标悬停在div上。将其更改回div的条件是什么？移动鼠标？或者它应该在按下鼠标按钮时保持绿色，释放时返回黑色？@YuriyGalanter当我悬停并聚焦于它时，它会变成绿色。假设：在那之后，我的鼠标将移动到其他地方，并返回到之前的黑色绿色分区。现在，当鼠标悬停并聚焦在绿色div上时，我希望它再次变黑。
<div id="profile" tabindex="0"></div>

#profile:hover, #profile:focus{
    background: green;    
}