Onhover on CSS doesn't work on disabled elements

Question

0.00/5 (No votes)

See more:

, +

I am trying to make something with css, and I found out that hover doesn't work on disabled elements.

What I have tried:

html:

<div class='text'>
     hi
</div>

<button id='btn' disabled>hi</button>

css:

#text {
  display: none; 
}
#btn:hover + #text{
  display: block;
}

Posted 22-Nov-19 4:37am

Member 14460691

Updated 1-Dec-19 21:24pm

Add a Solution

Comments

Richard Deeming 27-Nov-19 14:48pm

Disabled buttons are generally a bad idea anyway:
Disabled buttons suck - Axess Lab[^]

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Harsh.Shah.ifour · Answer 1 · 2019-11-28T18:29:00

Hi
Hover works on disabled button. i have tried to run your code and found a one syntax mistake. but then by solving it, your code is working now. take a look here: Hover over disabled button[^]

<div class='text'>
     hi
</div>

you have used text as a class in above div but when you apply hover over disabled button you have applied text as an id, that's why your code is not working properly.

Do this correction. and you will get proper output. let me know if you have any query.
Hope this will help you. Thank you.

W∴ Balboos, *GHB* · Answer 2 · 2019-11-22T05:02:00

Solution 1

You would be better served with using events that you control.

Since it's a disabled control you cannot use onfocus, but you can use onmouseover and onmouseout. From there you can do whatever you want for the hover event.

Posted 22-Nov-19 5:02am

W∴ Balboos, GHB

Member 14665733 · Answer 3 · 2019-11-23T06:28:00

Solution 2

just use :enabled with :hover to solve your problem
Example : -

#btn:hover:enabled {
    // it will work only on that time when button will be enabled.
}

Posted 23-Nov-19 6:28am

Member 14665733

Parth Munjpara · Answer 4 · 2019-12-01T17:20:00

Solution 5

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

just try this css code and see what's the output

Posted 1-Dec-19 17:20pm

Parth Munjpara