I have a condition where we have below code. i want to overwrite tr:hover when class greyLock is used. how to implement it. i cannot remove background-color: #EEE !important; from tr:hover class.
tr:hover {background-color: #EEE !important;
cursor: pointer;
}
.greyLock {
background-color: #7A7A7A !important;
cursor:default !important;
}
!important styles obey the same specificity rules as normal css styles when trying to override them.
To make your .greyLock rule override the one from tr:hover, you'll need to make the selector more specific.
Depending on your HTML, something like this should do the trick:
tr.greyLock:hover {
background-color: #7A7A7A !important;
cursor:default !important;
}
Test with to redefine tr:hover on other css sheet and link on html before first sheet