Change mouse pointer on click

Question

I'm currently working on a project that involves elements where a custom mouse pointer will be used. The code that I'm using for that function is simple just:

.hand {
    cursor:url(/images/cursor1.gif);
}

Now to my question: - I was just wondering (as the title says) if there are anyway that I can make the cursor change to cursor2.gif when you click inside the div-class "hand" (?).

Solution

Use the :active psuedo-class:

.hand:active {
    cursor: url('/imgages/cursor1.gif');
}

Comments

[QAW]

It seems to work, but the only problem is that as soon as I click inside .hand cursor2 appears, and disappears just as quick. Here's my CSS: .hand { width: 1500px; height: 500px; background: pink; cursor:url(/images/cursor1.gif), none; } .hand:active { cursor: url(/images/cursor2.gif), none; }

[original_username]

The 'ffox' line is required to override a default CSS cursor rule that Mozilla use: "body:not([id])". I just give the body an id if it doesn't already have one. It doesn't need to be 'body_id', it can be anything.

[Carlos Pinzón]

There's a minor typo: 'imgages'.