• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

121
Views
How to disable classList on only hover and not styling

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?

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error