在JS设置值后，有没有另一种方法可以在没有!important的情况下添加"hover"效果？

Question

学习网站开发（HTML、CSS、JS、PHP、yadda yadda）。我正在尝试通过 CSS 在元素上创建悬停效果，但是在 JS 函数设置了一个值之后，似乎我无法在不使用 !important.

的情况下覆盖

我在 JS 中有一个设置 opacity/color/etc 的滚动功能。用户向下滚动后。由于 JS 似乎直接影响元素内联样式，因此它总是比我的样式表中的任何内容都具有更高的特异性。因此，我的 :hover 效果（增加按钮的不透明度）将被覆盖。

window.onscroll = function() {arcScrollEffect()}; // calls scroll function on scrolling
function arcScrollEffect() {
    btn = document.getElementsByClassName("arcHeaderBtn")[0];
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop) {
        btn.style.width = '20%';
        btn.style.fontSize = '2em';
        btn.style.backgroundColor = '#DDD';
        btn.style.color = 'rgba(0, 0, 0, 1)';
        btn.style.opacity = '0.3';
    } else {
        btn.innerHTML = 'RED';

    }
}

.arcHeaderBtn {
    background-color: inherit;
    border: none;
    position: fixed;
    top: 10vh; 
    left: 0;
    width: 100%;
    font-size: 6em;
    text-align: center;
    opacity: 0.5;
    border-radius: 0 0.6em 0.6em 0;
    transition: color 1s, background-color 1s, width 1s, top 1s, font-size 1s, opacity 1s;
}

button.arcHeaderBtn:hover {
    opacity: 0.5 !important;
}

<button class="arcHeaderBtn">Button</button>

请注意，在这种特殊情况下，我确实有一个解决方法，例如不在 JS 中设置不透明度或在 CSS 中使用 !important（效果很好）。但是，有人告诉我 !important 不是好的编码，它相当于旧语言中的 GOTO 并且 I fear velociraptor attacks. 有什么建议吗？

Answer 1

我不建议直接从 JavaScript 应用样式，因为如您所见，内联样式将始终具有优先权，除非您使用 !important 标志。

作为解决方法，您可以使用 JavaScript 将 CSS class 添加到使用 element.classList.add 的元素，然后您可以对样式进行更多控制.

在JS设置值后，有没有另一种方法可以在没有!important的情况下添加"hover"效果？

Is there another way to add "hover" effect without !important after JS has set a value?

javascript

css

css-specificity