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