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>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?
>Solution :
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" class="btns">Next Question</button>
<button id="end" class="btns" disabled>End Quiz</button>Alternatively, you can also use the CSS disabled pseudo class as the selector.