Remove hover style?

I have a table and a style like this:

.highlightrows tbody tr:hover {
  background-color: #aaaaff;
 }

Then I have a click handler on this row to remove the row from the table and add it to another table. When I click on the mouse I'm of course hover over the row and therefor is the style applied. My problem is that when I append it to the other table the hov开发者_Python百科er-style is not removed. How can I remove the style in jQuery?

Edit: I've made a jsFiddle to discribe my problem. fiddle

---

you have two tables... why not do it this way??

#table1.highlightrows tbody tr:hover {
  background-color: #aaaaff;
}

#table2.highlightrows tbody tr:hover {
  background: none;
}

---

Ha, that seems to be a bug with the browser, as you are no longer hovered over the element.

Anyway, you could try

$(this).css("background-color", "transparent");

Or otherwise set it to its default color, after you move it.

:hover is not a style, and AFAIK you can't remove it from an element - only the browser can do that. The only thing you can do is force the default style on the actual element

---

I was just running into this issue.

I had a :hover style in my CSS and while running java script I didn't want :hover to be in effect. I couldn't find a way to remove the class so I decided to overwrite the class by appending a new class with my new attributes to the head.

CSS

.myStyle:hover {
    display: block; background: #efefef;
}

JavaScript

$("head").append("
    <style type='text/css'>
        .myStyle:hover { display: none; background: #ff0000; }
    </style>);

hope that helps