javascript - CSS !important IE8 not recognized

Question

Mistyped code. Fix found

.tblmain td overrides an tr affects due to the DOM level. .tblmain tr should be used instead. If anyone wants to submit as an answer, I will accept. Thank you!

I am using the !important identifier in my CSS to be certain the background color of a tr is changed on hover.

The CSS for the tr is

.tblmain td {
    background-color: white;
}

then through a onmouseover event I use javascript as below

onmouseover='$(this).addClass("hover")'

the hover css is below

.hover {
    cursor: pointer;
    background-color: #15b6b8 !important;
}

The background is still white on hover, but when the tr class is remove, the hover works as expected. I know !important is considered hacky in situations like these, so I am open to any suggestions including but not limited to using !important to make the predominant color the hover class.

Thanks in advance!

Answer 1

So you're adding a class, but not removing it? Use toggleClass instead.

Further, using onmouseover is poor separation of code. Try this:

$('.tblmain').on('mouseover mouseout', 'tr', function(e) {
    $(this).toggleClass('hover');
});

You might need to toggle the background-color of the td children instead, though. If there is a background-color applied to those, it can and will override the styles for the tr.

$('.tblmain').on('mouseover mouseout', 'tr', function(e) {
    $(this).find('td').toggleClass('hover');
});