Changing background color in JS wipes out css rules.

I change the color of selected buttons to show the user which button to click next. Although all buttons are members of the same CSS class, only the ones I never change are still under CSS (turn red on hover).

[code]document.tournform.calc.style.backgroundColor = “#ffff00”;
document.tournform.taly.style.backgroundColor = “white”;
document.tournform.del1.style.backgroundColor = “white”;

—————————————————
body {
background-color: #B0FFFF;
}
.buttonStyle {
background-color: white;
}
.buttonStyle:hover {
background-color: red;
transition: ease 1s;
}
.buttonStyle:active {
background-color: red;
}
</STYLE>
——————————————————
<input type=”button” class=”buttonStyle” id = “calc” value=”Click to start” onClick=”calculate()”>
<input type=”button” class=”buttonStyle” id = “taly” value=”Tally” onClick=”doTally()”>
<input type=”button” class=”buttonStyle” id = “del1″ value=”DelOne” onClick=”delOne(-1)”>
<input type=”button” class=”buttonStyle” value=”Reset” onClick=”doClear(0)”>[/code]

I’m at a loss to know what happened here.
The page is at https://www.wjporter.com/misc/irvtest.htm

Thanks in advance.

Also in #JavaScript _↴