更改 html 页面上的鼠标光标

发布于 2024-07-29 10:34:38 字数 211 浏览 5 评论 0原文

我需要一种改变 html 页面上鼠标光标的方法。我知道这可以通过 css 来完成，但我需要能够在运行时更改它，例如在页面上有按钮，当单击它们时，它们会将光标更改为特定的自定义图形。我认为最好的（或唯一的？）方法是通过javascript？我希望有一种方法可以很好地做到这一点，并且可以在所有主要浏览器上运行。如果有人能帮助我解决这个问题，我将非常感激。

提前致谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

欢烬 2024-08-05 10:34:38

感谢您的回复。
我终于让它工作了。我是这样做的：

<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 光标一起使用，只能与 cur 一起使用。这就是为什么我在 ani 后面加上了 cur。 ani 将显示在 IE 中，cur 将显示在 Firefox 中。

有谁知道是否可以在 IE 中更改光标而不显示 active-X 警告并且用户必须接受？

Thanks for the replies.
I finally got it working. Here's how I did it:

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

I found out that to get it to work in Firefox you must pass at least 2 choices of cursors, e.g. cursor="url('cursor1.cur'), default"
Or else it wont work. Also, in Firefox it doesn't work with ani-cursors, only cur. Which is why I've put a cur after ani. The ani will show up in IE, the cur in Firefox.

Does anyone know if it's possible to change the cursor in IE without the active-X warning showing up and the user having to accept?

回复收藏 0 原文

捂风挽笑 2024-08-05 10:34:38

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

有一个例子在底部。

回复收藏 0 原文

荒岛晴空 2024-08-05 10:34:38

如果您只想在链接上执行此操作，这很容易。
那里有一些像这样的 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。

It's easy if you want to do this on Links only.
There you have some CSS like this:

a:hover { cursor: crosshair; } #this is when you mouseover the link
a:active { cursor: wait; } #this is the moment you click it

Since :active won't work for other Elements than a, you may want to use the Javascript stated by Prestaul and scunliffe.

回复收藏 0 原文

知足的幸福 2024-08-05 10:34:38

使用 JQuery：

$('.myButton').click(function(){
    $(this).css('cursor', 'url(/url/to/cursor/image)');
});

Using JQuery:

$('.myButton').click(function(){
    $(this).css('cursor', 'url(/url/to/cursor/image)');
});

回复收藏 0 原文

嗳卜坏 2024-08-05 10:34:38

我对问题的描述与此处给出的答案略有不同。
一个常见的问题是我们想要运行某些功能，例如按下按钮，该功能可能需要很长时间。在开始之前，我们希望按钮处于禁用状态，并且这也可以在屏幕上看到，或者我们希望在启动该功能之前更改屏幕上的光标或其他视觉特征。
问题是，如果我们输入不必要的样式更改，JavaScript 将执行该功能，并且更改不会反映在屏幕上，直到 JavaScript 完成上述功能后，它才会在屏幕上直观地显示某些内容。
为了说明，我将举一个例子：

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

在这个例子中，禁用按钮/“e.attr（'disabled'，true）;”/和“时间”元素的颜色更改为“#ffff00”没有反映在屏幕，在 FillTable() 之前。

我花了5天时间才弄清楚如何解决这个问题。
解决方案基本上非常简单，但解释起来却很糟糕。
我们需要让 JS 认为它无关紧要，并且可以将 css 更改渲染到屏幕上。只有这样我们才运行需要更长时间的函数。但如何实现这一目标呢？
为此，您需要接收常规信号。 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;
    
}

I will describe the problem a little differently than the answers given here.
A common problem is that we want to run some function, for example, to press a button, which function can take a very long time. Before starting, we want the button to get the status disabled, and this can also be seen on the screen, or we want to change the cursor or other visual features on the screen before starting the function.
The problem is that if we enter a style change unnecessarily, the JavaScript will perform the function and the changes will not be reflected on the screen, until after the JavaScript completes the mentioned function, it gets someone to display something visually on the screen.
For illustration, I will give an example:

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

In this example, the disabled button /"e.attr('disabled', true);"/ and the color change of the "time" element to "#ffff00" are not reflected on the screen, before FillTable() .

It took me 5 days to figure out how to solve such a problem.
The solution is basically very simple, but it is very poorly explains.
We need to make JS think that it has nothing to do and can render the css changes to the screen. Only then do we run the function that takes longer. But how to achieve this?
For this you need to receive a regular signal. WORKER is ideal for this. You install a worker that after 500 milliseconds sends like the time or whatever and displays it on the web page with some element. If it works for you, add the call to an empty procedure. In my case, it's the PROC() function.

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

Now it gets interesting. We will rewrite the empty PROC() function so that it always does what we want. First we rewrite it to make some changes to the screen ... Alfa(). Once that's done, we'll override it to run our long-running function.... Beta().
The intermediate problem is that we need to resolve the parameters to be globally accessible. For me, the gSet() and gGet() functions are used for this. That's about all, the rest should have been clear from the code.

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

Of course, exists also very sophisticated code without functions: gSet(), gGet() and "eval()", but it should be enough to understand the principle.
You can use something like this (but I won't explain why it also works for parameters, without gSet() and 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;
    
}

回复收藏 0 原文

爱要勇敢去追 2024-08-05 10:34:38

//you can set all the normal cursors like this
someElem.style.cursor = 'progress';

您想要什么特殊光标？...也许有更好的选择。

//you can set all the normal cursors like this
someElem.style.cursor = 'progress';

What is the special cursor you want?... maybe there is a better option.

回复收藏 0 原文

孤蝉 2024-08-05 10:34:38

// 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)";

// 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)";

回复收藏 0 原文

~没有更多了~