CSS multiple class selector to control :hover effect

I have a div with a :hover pseudo-class that applies many CSS effects to indicate to the user that they are hovering over it.

How do I disable the CSS effect when the user hovers over it by adding a .disable 开发者_JAVA技巧class?

http://jsfiddle.net/nQUSn/1/

For all browsers except IE < 9:

Change .a:hover { to .a:not(.disable):hover {

You could create a selector a.disable:hover that resets the styles on that anchor element. For example, if your a:hover css was:

a:hover {
    color: red;
}

And the link color is normally blue, your disable CSS could look like:

a.disable:hover {
    color: blue;
}

no need to use the ".disable" class. You can chain the :disabled pseudo-class with the :hover pseudo-class:

elem {
  color : blue;
}
elem:hover {
  color : lightblue;
}
elem:disabled, elem:disabled:hover {
  color : grey;
}