I have this CSS:
html.darkBlue .btn1 button:hover:not(.nohover) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
I am rather confused about disabled. How can I make it so that this CSS does not work if the button is disabled?
If you don't need to support IE < 9 you could use the :enabled pseudo class.
html.darkBlue .btn1 button:hover:enabled {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
It worked for me after adding the ":enabled" selector as following :
element-class:hover:enabled {
properties...
}
Try with (demo http://jsfiddle.net/JDNLk/)
HTML
<button class="btn1" disabled="disabled">disabled</button>
<button class="btn1">enabled</button>
CSS
html.darkBlue .btn1 button:hover:not([enabled="enabled"]) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
You can use the negation pseudo class selector (CSS 3). I am not sure if there is also a solution using attribute selectors (CSS 2.1).
Given this html
<div class="darkBlue">
<h2>disable hover for disabled buttons</h2>
<div class="btn2">
<button>hover enabled</button> <br/>
<button disabled="disabled">hover disabled</button>
</div>
</div>
and this css
.darkBlue .btn2 button:hover:not([disabled="disabled"]) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
you can achive that every button inside the matiching selector has no hover-style applied. See this example.
At caniuse.com you can find tables that compare which browser supports which selector
This is a hack and is yet not exactly the same but in case you are restricted to css 2.1 this may be a starting point. If you define a seperate style-rule for disabled buttons and use the color that you picked for disabled buttons you can fake a disabled hover-style:
.btn3 button[disabled="disabled"]:hover
{
background-color: rgb(212, 208, 200);
color: rgb(128, 128, 128);
}
Use the CSS :Not attribute selector to only target elements that don't have the disabled attribute.
html.darkBlue .btn1 button:not([disabled]):hover
That way your hover style will only be applied to buttons that are not disabled.
.btn:disabled:hover{color:default-color;background:default prop}
. or .btn:disabled{pointer-events:none}