I'm having an issue with an element that is supposed to change its background color from "lightGreen" to "red" upon hovering. However, even though the class is being added properly, the color remains lightGreen.
It's worth noting that the element starts with the "disabled" class by default, but in this case, I am removing it before adding the "uiHighlight" class.
Why isn't it working as expected for me?
The CSS code looks like this:
#increaseImpulse, #decreaseImpulse, #undoLastAction {
border: 1px solid black;
background-color: lightGreen;
}
.uiHighlight {
background-color: red;
}
.disabled {
display: none;
}
And the HTML code:
<tr id="undoLastAction" class="disabled">
<td colspan=2>
Undo last action
</td>
</tr>
As well as the JavaScript code:
$("#undoLastAction")
.hover(
function(e){
$(this).addClass("uiHighlight");
},
function(e){
$(this).removeClass("uiHighlight");
}
)
.click(function(e){
console.log("undoLastAction")
});