javascript - クリックされた状態でホバークラスをjqueryトグル/非アクティブ化

Question

したがって、テーブル行にカーソルを合わせると青色の背景色が表示され、テーブル行をクリックすると灰色の背景色が表示されるコードがあります。

1 つの例外を除いて、ほぼ希望どおりに動作します。

行をクリックし、その行にクリックされたクラスがある場合、: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/