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

Are you using plain JavaScript or jQuery to handle this click? — Code Maverick
– 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
– Adrian, Commented Mar 28, 2013 at 22:11
@Adrian - semi, but it should work as well as long the mouse is down. — QAW
– QAW, Commented Mar 28, 2013 at 22:48

Blender · Accepted Answer · 2013-03-28 22:06:05Z

8

Use the :active psuedo-class:

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

answered Mar 28, 2013 at 22:06

Blender

300k55 gold badges463 silver badges512 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

QAW Over a year ago

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

Carlos Pinzón Over a year ago

There's a minor typo: 'imgages'.

derek_duncan · Accepted Answer · 2013-03-28 23:27:47Z

0

Try this jquery

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

answered Mar 28, 2013 at 23:27

derek_duncan

1,3771 gold badge13 silver badges22 bronze badges

Comments

original_username · Accepted Answer · 2013-10-09 15:02:58Z

0

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.

edited Oct 9, 2013 at 15:02

answered Oct 9, 2013 at 7:19

original_username

2,39921 silver badges25 bronze badges

1 Comment

original_username Over a year ago

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.

Collectives™ on Stack Overflow

Change mouse pointer on click

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related