代码之家 › 专栏 › 技术社区 › Clox

在HTML页面上更改鼠标光标

mouse-cursor css javascript

Clox · 技术社区 · 15 年前

我需要一种在HTML页面上更改鼠标光标的方法。我知道这可以用CSS来完成,但是我需要能够在运行时更改它,比如在页面上有按钮,当它们被单击时,它们会将光标更改为特定的自定义图形。我认为最好的(或唯一的?)这样做的方式是通过javascript?我希望有一种方法可以很好地在所有主要浏览器上运行。如果有人能帮助我,我将非常感激。

提前谢谢

6 回复 | 直到 9 年前

Clox 15 年前

谢谢你的回复。我终于成功了。我是这样做的:

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

我发现为了让它在火狐中工作你必须至少传递两个光标选项,例如cursor=“url('cursor1.cur'),default” 否则就不起作用了。另外,在Firefox中,它不适用于ANI光标,只适用于cur。这就是为什么我要对阿尼下手。ANI将出现在IE中,而CUR将出现在Firefox中。

有人知道在IE中是否可以更改光标而不显示Active-X警告,用户是否必须接受?

Daniel A. White 15 年前

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

底部有一个例子。

Hurix 15 年前

如果你只想在链接上做这个很容易。这里有一些这样的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和scullife声明的javascript。

David Morabito 14 年前

使用jQuery:

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

-1

scunliffe 15 年前

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

你想要什么特殊的光标?…也许还有更好的选择。

-1

Prestaul 15 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前