我需要一种改变html页面鼠标光标的方法。我知道可以使用css来实现，但我需要能够在运行时更改它，例如在页面上有按钮，当它们被点击时，将光标更改为特定的自定义图形。我认为这样做的最好（或唯一？）方法是通过javascript？希望有一种好的方法能够在所有主要浏览器上正常工作。
如果有人能够帮助我，我将非常感激。
提前致谢。
如果有人能够帮助我，我将非常感激。
提前致谢。
7个回答
6
感谢回复。 我终于搞定了。以下是我的做法：
<html>
<head>
<script type="text/javascript">
function changeToCursor1(){
document.body.style.cursor="url('cursor1.ani'),url('cursor1.cur'), default";
}
function changeToCursor2(){
document.body.style.cursor="url('cursor2.ani'),url('cursor2.cur'), default";
}
</script>
</head>
<body>
<form>
<input type="button" value="Change to cursor 1" onclick="changeToCursor1()" /><br>
<input type="button" value="Change to cursor 2" onclick="changeToCursor2()" />
</form>
</body>
我发现在Firefox中使其工作，您必须至少传递两个光标选择，例如cursor="url('cursor1.cur'), default"，否则它将无法正常工作。此外，在Firefox中，它不支持ani-cursors，只支持cur，这就是为什么我在ani后面放了一个cur的原因。ani将显示在IE中，cur将在Firefox中显示。
有人知道是否可以在IE中更改光标而不会出现active-X警告并要求用户接受吗？
- Clox
1
使用 JQuery：
$('.myButton').click(function(){
$(this).css('cursor', 'url(/url/to/cursor/image)');
});
- David Morabito
1
如果你只想在链接上做这件事，那么这很容易。你可以使用以下类似的CSS：
a:hover { cursor: crosshair; } #this is when you mouseover the link
a:active { cursor: wait; } #this is the moment you click it
由于 :active 仅适用于 a 元素，您可能需要使用 Prestaul 和 scunliffe 提出的 Javascript。
- Hurix
0
我将以与此处给出的答案不同的方式描述问题。
一个常见的问题是，我们想要运行某个函数，例如按下一个按钮，这个函数可能需要很长时间。在开始之前，我们希望按钮的状态变为禁用，并且这也可以在屏幕上看到，或者我们希望在开始函数之前改变屏幕上的光标或其他可视特征。
问题是，如果我们不必要地进行样式更改，JavaScript将执行该函数，并且更改不会在屏幕上反映出来，直到JavaScript完成所述函数后，才会有人在屏幕上显示一些可视内容。
为了说明，我将举一个例子：
在这个例子中，在调用FillTable()函数之前，禁用按钮 /"e.attr('disabled', true);"/ 和将"time"元素的颜色更改为"#ffff00"在屏幕上没有反映出来。
我花了5天时间才弄清楚如何解决这个问题。 解决方案基本上非常简单，但是解释得很差。 我们需要让JS认为它与渲染CSS变化到屏幕无关。只有这样，我们才能运行需要更长时间的函数。但是如何实现呢？ 为此，您需要接收一个定期的信号。WORKER非常适合这个任务。您安装一个worker，在500毫秒后发送类似时间或其他内容，并在网页上显示出来。如果对您有效，请添加对空过程的调用。在我的情况下，这是PROC()函数。
现在变得有趣了。我们将重写空的PROC()函数，以便它始终按照我们的意愿执行。首先，我们将对屏幕进行一些更改... Alfa()。完成后，我们将覆盖它以运行我们的长时间运行函数... Beta()。 中间问题是我们需要解决参数使其在全局范围内可访问。对我来说，gSet()和gGet()函数用于此目的。大致就是这样，其余部分应该从代码中清楚明了。
当然，也存在一些非常复杂的代码，没有函数：gSet()、gGet()和"eval()"，但是理解原理应该足够了。 你可以使用类似这样的代码（但我不会解释为什么它也适用于参数，而不需要gSet()和gGet()）：
function NewPageSize() {
var e=$('#table1-pagesize');
e.attr('disabled', true);
console.log('page-size change event');
$('#time').css('background-color',RGB('#ffff00'));
let mPageSize=e.val();
FillTable(-1, 1, mPageSize); //a function that can take a very long time
e.attr('disabled', false);
$('#time').css('background-color',RGB('#ffffff'));
};
在这个例子中，在调用FillTable()函数之前，禁用按钮 /"e.attr('disabled', true);"/ 和将"time"元素的颜色更改为"#ffff00"在屏幕上没有反映出来。
我花了5天时间才弄清楚如何解决这个问题。 解决方案基本上非常简单，但是解释得很差。 我们需要让JS认为它与渲染CSS变化到屏幕无关。只有这样，我们才能运行需要更长时间的函数。但是如何实现呢？ 为此，您需要接收一个定期的信号。WORKER非常适合这个任务。您安装一个worker，在500毫秒后发送类似时间或其他内容，并在网页上显示出来。如果对您有效，请添加对空过程的调用。在我的情况下，这是PROC()函数。
function startWorker() {
if(typeof(w) == "undefined") {
w = new Worker("/js/worker.js");
}
w.onmessage = function(event) {
document.getElementById("time").innerHTML = event.data;
PROC();
};
}
function stopWorker() {
w.terminate();
w = undefined;
}
function PROC() {return;} //empty function
现在变得有趣了。我们将重写空的PROC()函数，以便它始终按照我们的意愿执行。首先，我们将对屏幕进行一些更改... Alfa()。完成后，我们将覆盖它以运行我们的长时间运行函数... Beta()。 中间问题是我们需要解决参数使其在全局范围内可访问。对我来说，gSet()和gGet()函数用于此目的。大致就是这样，其余部分应该从代码中清楚明了。
function NewPageSize() {
var e=$("#table1-pagesize");
e.attr('disabled', true);
let mPageSize=e.val();
console.log('page-size change event');
$('#time').css('background-color',RGB('#ffff00'));
gSet('Beta',
`
FillTable(-1, 1,`+mPageSize+`);
$('#time').css('background-color',RGB('#ffffff'));
var e=$("#table1-pagesize");
e.attr('disabled', false);
`
);
PROC=Alfa;
};
function EmptyProc() {return;}
function Alfa() {
PROC=Beta;
}
function Beta() {
PROC=EmptyProc;
let s=gGet('Beta');
let arr=s.split(';');
for (var i=0; i<Len(arr); i++) {
let t=arr[i];
if (Len(Trim(t))>1) {
eval(t);
}
}
}
当然，也存在一些非常复杂的代码，没有函数：gSet()、gGet()和"eval()"，但是理解原理应该足够了。 你可以使用类似这样的代码（但我不会解释为什么它也适用于参数，而不需要gSet()和gGet()）：
function NewPageSize() {
var e=$("#table1-pagesize");
e.attr('disabled', true);
let mPageSize=e.val();
console.log('page-size change event');
$('#time').css('background-color',RGB('#ffff00'));
Beta=function () {
PROC=EmptyProc;
FillTable(-1, 1,eval(mPageSize)); //our long running function
$('#time').css('background-color',RGB('#ffffff'));
var e=$("#table1-pagesize");
e.attr('disabled', false);
}
PROC=Alfa;
}
- Jan Tungli
-1
//you can set all the normal cursors like this
someElem.style.cursor = 'progress';
你需要什么特殊的光标？也许有更好的选择。
- scunliffe
-1
// Get the element you want to change the cursor for
var el = document.getElementById('yourID');
// This image url is relative to the page url
el.style.cursor="url(pathToImage.png)";
- Prestaul
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接