javascript - 如何仅在悬停而不设置样式时禁用 classList

Question

nxt_question_btn.classList.remove('btns')

.btns{
    margin-top: 10px;
    float: right;
    height: 30px;
    background-color: lightblue;
    border: none;
    outline: none;
    cursor: pointer;
    width: 110px;
}
.btns:hover{
    border: 1px solid black;
    box-shadow: 2px 1px 5px lightblue;
}

        <button id="next" class="btns">Next Question</button>
        <button id="end" class="btns">End Quiz</button>

我想在禁用按钮时禁用悬停选项，我的 Javascript 目前禁用样式和悬停选项。如何仅定位悬停？

Answer 1

使用:not()伪类仅在按钮没有 disabled 属性时应用悬停样式。

.btns{
    margin-top: 10px;
    float: right;
    height: 30px;
    background-color: lightblue;
    border: none;
    outline: none;
    cursor: pointer;
    width: 110px;
}
.btns:not([disabled]):hover{
    border: 1px solid black;
    box-shadow: 2px 1px 5px lightblue;
}

<button id="next" class="btns">Next Question</button>
        <button id="end" class="btns" disabled>End Quiz</button>

或者，you can also use the CSS disabled pseudo class作为选择器。