在html页面上更改鼠标光标

问题描述：

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

预先感谢

答

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

<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之后放了一条曲线。 ani将出现在IE中，即Firefox中的这个。

有没有人知道是否有可能改变光标在IE中没有active-X警告出现，用户不得不接受？

答

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

在底部即使世界的例子。

答

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

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

答

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

答

这很容易，如果你只想在Links上做到这一点。有你有一些CSS是这样的：

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

由于：活跃不会为其他元素不是工作，你可能希望使用Prestaul和scunliffe说的JavaScript。

答

使用jQuery：

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

在html页面上更改鼠标光标

相关推荐