Override hover pseudo class CSS attributes when specific html-class is set

Question

Hi. I am trying to display sets of images with up and down navigation in form of arrows. I have added

cursor:pointer;

to the arrows on hover to emphasize the clickability. However, when there is no more images in a certain direction, i set the class to disabled.

.disabled
{
    cursor:default;
}

However, the hover pseudo class takes precedence here, and changes the cursor to pointer. How can I prevent :hover to set the cursor to pointer when .disabled is set? Is it at all possible?

Answer 1

Add also

.disabled:hover {
   cursor: default;
}

Answer 2

Use !important.

.disabled {
    cursor:default!important;
}

IE6's !important implementation is buggy, so if you need to support it you might just be better off re-ordering your rules to get the required precedence for the .disabled class.

David Dorward raised an interesting point to note in the comments. Applying a value to cursor in a :hover pseudo-class is completely redundant. The following to rules have exactly the same effect:

.mylink { cursor:pointer; }
.mylink:hover { cursor:pointer; }

Therefore, you should avoid setting cursor in a pseudo class and stick to

.mylink { cursor:hand; }