Hover and Active only when not disabled
Solution 1:
You can use :enabled pseudo-class, but notice IE<9 does not support it:
button:hover:enabled{
/*your styles*/
}
button:active:enabled{
/*your styles*/
}
Solution 2:
.button:active:hover:not([disabled]) {
/*your styles*/
}
You can try this..
Solution 3:
Why not using attribute "disabled" in css. This must works on all browsers.
button[disabled]:hover {
background: red;
}
button:hover {
background: lime;
}