How can I make a CSS Hover not work if a 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;
}

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

• browser support for css2 selectors
• browser support for css3 selectors

Update using a hack to be able to use css2 selectors

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

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

It worked for me after adding the ":enabled" selector as following :

element-class:hover:enabled {
  properties...
}