How to disable classList on only hover and not styling-CodePudding

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" >Next Question</button>
        <button id="end" >End Quiz</button>

I want to disable the hover option when the button is disabled, my Javascript currently disbles the styling and the hover option. How can I target the hover only?

CodePudding user response：

Use the :not() pseudo class to only apply the hover style when the button does not have the disabled attribute.

.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" >Next Question</button>
        <button id="end"  disabled>End Quiz</button>

Alternatively, you can also use the CSS disabled pseudo class as the selector.

CodePudding user response：

I also want to mention that if you already have a style for :disabled, you can add the hover state to it:

.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;
}

.btns:disabled, .btns:disabled:hover {
  border: lightgray;
  box-shadow: none;
  cursor: no-drop;
}

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