Javascript jquery在单击状态下切换/停用悬停类

所以我有这样的代码，当我在表格行上悬停时，我得到一个蓝色的背景行颜色，当我点击表格行时，我得到一个灰色的背景行颜色

除了一个例外，它几乎像我所希望的那样工作

当我单击该行并且该行有一个已单击的类时，则：hover类不应覆盖背景色

i、 e当我悬停已单击的行时，悬停颜色仍应为灰色

以下是我的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;
}

这是我的JSFIDLE：

只需添加：

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

只需添加：

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