JavaScript 禁用外部 CSS 的效果？

Question

我有一个足够简单的情况，我有三个只读输入文本，在悬停时我通过 CSS 更改它们的背景，并且在单击时我想永久更改单击框的背景(直到单击下一个)但是我很快单击其中一个，CSS 的悬停效果将被禁用，悬停时颜色不再改变。代码和输出如下:

function Calculate(id)
{
    var list = document.getElementsByClassName("options");
    for (var i = 0; i < list.length; i++) {
        list[i].style.background = 'none';
    }
    document.getElementById(id).style.background = '#d1d1d1';
}

.options:hover {
	background:#d1d1d1;
}

<input type="text" class="options" id="3" value="3" style="width: 30px;text-align:center" onclick="Calculate(this.id)" readonly> 
    
<input type="text" class="options" id="6" value="6" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly>
    
<input type="text" class="options" id="9" value="9" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly><br><br>

Answer 1

在 css 属性之后使用 !important;，因为你在 javascript 代码中使用 background 属性，即添加内联样式，所以 CSS 属性被内联 css 覆盖

function Calculate(id)
{
    var list = document.getElementsByClassName("options");
    for (var i = 0; i < list.length; i++) {
        list[i].style.background = 'none';
    }
    document.getElementById(id).style.background = '#d1d1d1';
}

.options:hover {
	background:#d1d1d1 !important;
}

<input type="text" class="options" id="3" value="3" style="width: 30px;text-align:center" onclick="Calculate(this.id)" readonly> 
    
<input type="text" class="options" id="6" value="6" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly>
    
<input type="text" class="options" id="9" value="9" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly><br><br>

如果你不想更新 CSS 那么你也可以使用 javaScript removeProperty() 函数来删除内联 background 属性，见下面的代码

function Calculate(id)
{
    var list = document.getElementsByClassName("options");
    for (var i = 0; i < list.length; i++) {
        list[i].style.removeProperty('background');
    }
    document.getElementById(id).style.background = '#d1d1d1';
}