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>Quiero deshabilitar la opción de desplazamiento cuando el botón está deshabilitado, mi Javascript actualmente deshabilita el estilo y la opción de desplazamiento. ¿Cómo puedo apuntar solo al hover?
Use la pseudo clase :not() para aplicar solo el estilo de desplazamiento cuando el botón no tiene el atributo 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> Alternativamente, también puede usar la pseudoclase CSS disabled como selector.
También quiero mencionar que si ya tiene un estilo para :disabled , puede agregarle el estado de desplazamiento:
.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>