单击更改鼠标指针

Question

我目前正在开发一个涉及将使用自定义鼠标指针的元素的项目。我用于该功能的代码很简单：

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

现在我的问题： - 我只是想知道（正如标题所说），如果你在div-class“hand”（？）中点击内部，我可以将光标变为cursor2.gif。

Answer 1

使用:active psuedo-class：

.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是否喜欢它。