Question

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 class="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.

Answer 1

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.