7

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

提前致谢

4

6 回答 6

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 中工作，你必须通过至少 2 个游标选择，例如 cursor="url('cursor1.cur'), default" 否则它将无法工作。此外，在 Firefox 中，它不适用于 ani-cursors，只能用于 cur。这就是为什么我在ani之后加上cur。ani 会出现在 IE 中，cur 会出现在 Firefox 中。

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

于 2009-07-31T04:49:37.980 回答
3

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

底部有一个例子。

于 2009-07-31T02:09:12.960 回答
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。

于 2009-07-31T02:30:31.167 回答
1

使用 JQuery：

$('.myButton').click(function(){
    $(this).css('cursor', 'url(/url/to/cursor/image)');
});
于 2011-05-29T06:38:56.990 回答
-1 
//you can set all the normal cursors like this
someElem.style.cursor = 'progress';

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

于 2009-07-31T02:16:42.327 回答
-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)";
于 2009-07-31T02:20:42.710 回答