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

在HTML页面上更改鼠标光标

mouse-cursor css javascript

Clox · 技术社区 · 16 年前

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

提前谢谢

6 回复 | 直到 10 年前

Clox 16 年前

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

<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 16 年前

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

底部有一个例子。

Hurix 16 年前

如果你只想在链接上做这个很容易。这里有一些这样的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 16 年前

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

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

-1

Prestaul 16 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前