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" (?).

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" (?).

• javascript
• html
• css
• mouse-cursor

• Are you using plain JavaScript or jQuery to handle this click? – Code Maverick Commented Mar 28, 2013 at 22:05
• Do you want the cursor to change only while the mouse button is down, or do you want it to change (semi-) permanently after the user clicks? – Adrian Commented Mar 28, 2013 at 22:11
• @Adrian - semi, but it should work as well as long the mouse is down. – QAW Commented Mar 28, 2013 at 22:48

3 Answers 3

Use the :active psuedo-class:

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

Try this jquery

(function(){
$hand = $('.hand');
$hand.click(function() {
    $hand.css('cursor','url(YOURGIF.GIF)');
});
});

I gather the difficulty is that you need the cursor to stayed changed after you have clicked, not just while the button is depressed.

Does this work for you?

function toggle(){

    var body = document.body; 
    body.id = ( body.id ) ? body.id : 'body_id'; // ffox

    body.use_custom_cursor = !body.use_custom_cursor;

    body.style.cursor = body.use_custom_cursor ? 'url(/images/cursor1.gif)' : 'auto';

}

and then...

<div onclick="toggle()">Target</div>

I've only tested with Webkit and Firefox, not sure if IE likes it.