CODEWITHSUNDEEP
htmlcss
Max
Max

Reputation: 4405

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

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?

Upvotes: 2

Views: 945

Answers (2)

Andy E
Andy E

Reputation: 344547

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

Upvotes: 1

kennytm
kennytm

Reputation: 523224

Add also

.disabled:hover {
   cursor: default;
}

Upvotes: 3

Related Questions