javascript - クリック時にマウス ポインターを変更する

Question

私は現在、カスタム マウス ポインターが使用される要素を含むプロジェクトに取り組んでいます。その関数に使用しているコードは単純です。

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

ここで私の質問に: - div クラスの「手」(?) 内をクリックすると、カーソルを cursor2.gif に変更できるかどうか (タイトルが示すように) 疑問に思っていました。

Answer 1

:active疑似クラスを使用します。

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

Answer 2

このjqueryを試してください

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

Answer 3

ボタンが押されている間だけでなく、クリックした後もカーソルを変更したままにする必要があるという難しさを集めています。

これはうまくいきますか？

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

}

その後...

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

Webkit と Firefox でのみテストしましたが、IE が気に入るかどうかはわかりません。