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

Question

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?

• Quentin: Setting cursor "what the mouse cursor should look like when pointing here: in a :hover rule "how to style things when pointing here" is rather redundant.
• Max: @David Dorward Hmm, you lost me there.. If you could rephrase that a bit?
• Andy E: I expanded on David's point a little in my answer.
• Quentin: Cursor only has any impact when the pointer is pointing at the element. :hover only has any impact when the pointer is pointing at the element. So foo:hover { cursor: bar } means "When the pointer is over the element, make the cursor 'bar' when it is over the element". The :hover is pointless.
• Max: Haha you are totally right. Thanks.

Answer 1

Add also

.disabled:hover {
 cursor: default;
}

• Max: Worked perfectly! Thanks man. (accepting answer when I can, some time limit)

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

• Quentin: IE6 does support !important (although there are some bugs relating to it) and hand is invalid CSS. (That said, !important is a one-use sledgehammer and is almost always the wrong answer (the right answer being "Get your specificity straight")
• Andy E: @David: you're quite right, I forgot that hand was a MS proprietary value for cursor. I do agree that re-ordering rules is usually the better solution. Thanks for the corrections.