Remove style property using jquery

Question

I have this style property in my css file:

.table tbody tr:hover th,
.table tbody tr:hover td { background: #d1e5ef; }

I would like to remove this via jquery, how would I go about doing this? I tried removeClass and attr but doesnt work.

Answer 1

You need to add some more css to make this work:

.table tbody tr:hover th,
.table tbody tr:hover td { background: #d1e5ef; }

.table tbody tr.no-hover:hover th,
.table tbody tr.no-hover:hover td { background: inherit; }

You would add the class .no-hover using $(selector).addClass('no-hover'). This will style them differently than the other :hover definitions you have. You may have to use an explicit color to make this work.

Answer 2

You have to work around that, because jQuery doesn't support pseudo-classes. For more information, see http://forum.jquery.com/topic/deactivating-the-hover-state-of-a-hyperlink

Answer 3

you define the style on object not by using class so obviously you can't remove them.

their is some option you can use

add a class to td like

1 .class1{ background: transparent;}

when you add this class through jQuery that is will work

2 change the color through jQuery

$('table tr td').css('background-color','transparent')

try this option and i thing it will work.

Answer 4

add class to td and style it, not the tag itself and then use removeClass() or add class in hover()