jquery toggle/deactivate hover class on clicked state

Question

So I have this code where when I hover over table row I get a blue background row color and when I click on the table row I get a gray background row color.

It almost works as I desire with one exception.

When I click on the row and that row has a clicked class, then :hover class should not override the background color.

ie the hover color should still be gray when I hover a row that has been clicked.

Here is my javascript code:

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

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

});

Here is my css class:

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

here is my jsfiddle: http://jsfiddle.net/DhdRG/9/

Answer 1

Just add:

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