javascript - jquery 在点击状态切换/停用悬停类

Question

所以我有这段代码，当我将鼠标悬停在表格行上时，我得到蓝色背景行颜色，当我点击表格行时，我得到灰色背景行颜色。

除了一个异常(exception)，它几乎可以如我所愿地工作。

当我点击该行并且该行有一个 clicked 类时，:hover 类不应覆盖背景色。

即，当我将鼠标悬停在已单击的行上时，悬停颜色仍应为灰色。

这是我的javascript代码:

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("clicked");

});

这是我的 CSS 类:

.my-class.negative:hover {
  background-color: blue;
}
.my-class.negative.clicked {
   background-color: gray;
}

这是我的 jsfiddle: http://jsfiddle.net/DhdRG/9/

Answer 1

只需添加:

.my-class.negative.clicked, .my-class.negative.clicked:hover {
   background-color: gray;
}