javascript - 如何在单击时为 div 提供悬停和事件状态

Question

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

常态:黑色

悬停状态:绿色

事件状态:绿色

当它处于事件状态时 (绿色)，我想将鼠标悬停在它上面，这会使 div 再次变黑。

我似乎无法让这个事件状态正常工作并反过来。

提前致谢!

这是我的 fiddle :Link

Answer 1

您可以在纯 CSS 中不使用 jQuery 来实现。给你的 DIV 一个 tabIndex，这样它就可以获得焦点:

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

并添加:focus类选择:

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

演示:http://jsfiddle.net/AfR49/10/

这样颜色会在点击后“粘住”。 (如果我正确理解您的要求)。如果你点击其他地方 - 颜色恢复到原来的颜色