I need a "don't do it if my class is disabled" kind of CSS selector

I currently have the following CSS:

a.enabled:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

Code:

<div><a class="enabled" ......>07</a></div>
<div><a class="enabled" ....... >08</a></div>
<div><a class="disabled" >09</a></div>
<div><a cl开发者_如何学JAVAass="enabled" ...... >10</a></div>
<div><a class="enabled" .......>11</a></div>

When I hover over an "enabled" link then the background color changes. When I hover over a "disabled" link then nothing happens.

I would like cut down on the size of my page by removing all the class="enabled" text that appears on so many lines (more than 200). Something like this.

After:

<div><a  ........>07</a></div>
<div><a  ....... >08</a></div>
<div><a class="disabled" >09</a></div>
<div><a  ...... >10</a></div>
<div><a  .......>11</a></div>

Is there a way I can do this with CSS? I just want the hover not to change the background-color if the link has a "disabled" status.

The selector you will use is

a:not(.disabled):hover { background-color: #f9f9f9; border: 1px solid #ddd; }

The trade-off is browser compatibility - IE < 9 does not support :not(). As a workaround you can use an override rule with these two rules instead, if you can define a default background color:

a, a.disabled:hover { /* Default background and border */ }
a:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

... or just stick to your existing .enabled and .disabled solution.

Add a css rule for a.disalbe:hover that has the same colour as the default that you have for a

a, a.disabled:hover { background-color: red; }
a:hover { background-color: green; }

demo in JsBin

Try using the css :not selector.

div a:not(.disabled):hover

could you just apply a style to all div a and then undo it when the .disabled class is applied?

Something like

a.disabled:hover { background-color: transparent; border: 1px solid transparent; }

 a.disabled:hover { background-color: red; border: 1px solid #ddd; }

Did you tried this? Or something like this:

a:hover { /* disabled-definitions */ }
a.enabled:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

...and then you only use the enabled class in your HTML