Question

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

提前致谢

Answer 1

感谢您的回复。我终于搞定了。我是这样做的：

<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'），默认为” 否则它不会工作。此外，在Firefox中，它不适用于ani-cursors，只有cur。这就是为什么我在ani之后放了一个cur。这个ani将出现在IE浏览器中，即Firefox。

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

Answer 2

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

在底部有一个例子。

Answer 3

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

Answer 4

使用JQuery：

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

Answer 5

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

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

Answer 6

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

在html页面上更改鼠标光标

6 个答案: