How can I make a CSS Hover not work if a button is disabled?

Question

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?

Answer 1

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;
}

Answer 2

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;   
}