Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by marsha grasett
marsha grasett
9,995 Points

SUBMIT btn disabled - Now how to disable hover?

input[type=submit]:hover { color: rgba(255, 204, 102, 0.7); }

How can I disable the above hover when the btn is disabled?

I have have changed the bg color here:

input[disabled="disabled"] { background-color: rgba(146, 161, 167, .3); }

5 Answers

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

Idle curiosity:

input[type=submit]:not([disabled=disabled]) { ... } ?

Does :not() work in this case?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Marsha -

Try applying the :hover style only if the button is enabled.

input[type=submit]:enabled:hover { color: rgba(255, 204, 102, 0.7); }
input[disabled] { background-color: rgba(146, 161, 167, .3); }

Unfortunately (but not surprisingly) :enabled only has support in IE9 and higher.

Here's a working example: http://codepen.io/JamesBarnett/pen/JGkwg

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

@james - yay thank you!

( I always do research before posting and all my searches were futile )

How do you know all this? -

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Marsha -

How do you know all this?

Basically educated guesses, Google-Fu and a lot of messing around in codepen to test those guesses.

More specifically for the :enabled:hover selector, I guessed that given given CSS is all about the casscade, it only made sense to be able to chain pseduo-classes together. So I guessed at the syntax and tried a few things in codepen until I got it to work.

As for the disabled selector, I remembered you can select every element that has a class with [class] so I guessed that's how you select a disabled element.

I tested that theory with my favorite method of checking selectors:

input[disabled] { outline: solid red; }

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

@James-

I think "educated" is the key word here. thanks again.