如何阻止JS中object.style.backgroundColor覆盖CSS的:hover效果？

问题根源在于直接通过JS设置element.style.backgroundColor会添加内联样式，而内联样式的优先级远高于CSS中的:hover伪类，导致按键后悬停效果被覆盖。想要把样式留在CSS里管理，最佳方案是用CSS类来控制高亮状态，而非直接操作内联样式。

修改后的CSS #

p {
    background-color: red;
}

/* 同时匹配悬停状态和高亮类 */
p:hover, p.highlight {
    background-color: blue;
}

修改后的JavaScript #

// 移除所有选项的高亮类
function unhighlightOption() {
    const options = document.querySelectorAll('p[id^="option"]');
    options.forEach(option => option.classList.remove('highlight'));
}

// 按键触发高亮
document.addEventListener("keyup", function(event) {
    unhighlightOption();
    switch (event.which) {
        case 49: // 主键盘1
        case 97: // 小键盘1
            document.getElementById('option1').classList.add('highlight');
            break;
        case 50: // 主键盘2
        case 98: // 小键盘2
            document.getElementById('option2').classList.add('highlight');
            break;
        case 51: // 主键盘3
        case 99: // 小键盘3
            document.getElementById('option3').classList.add('highlight');
            break;
        default:
            console.log('无效按键');
    }
});

为什么这样能解决问题 #

• CSS中:hover伪类和.highlight类的优先级相同，两者可以共存：当元素被按键选中添加highlight类后，鼠标悬停依然会触发:hover样式（这里两者样式一致，视觉上无变化；如果需要悬停时样式不同，可以单独写p.highlight:hover来定义）。
• 所有样式逻辑都留在CSS中，JS只负责添加/移除类，符合你希望尽量用CSS管理样式的需求。
• 避免了内联样式覆盖CSS规则的问题，从根源上解决了悬停失效的bug。

内容的提问来源于stack exchange，提问作者YellowYeetYak