使用 javascript 更改光标样式

Question

我正在开发一个使用自定义光标的浏览器游戏。我正在为 CSS 中的整个页面设置自定义光标（出于某种原因，如果我将其设置为 'body'，有时它会在某些区域变回默认光标）

html {
  cursor: url("http://www.iwansfactory.com/tycoon/defaultcursor.png"), default;
}

我想用 javascript

覆盖上面 CSS 的 url 属性

例如，当用户移动地图时，我想使用这个自定义光标：

http://www.iwansfactory.com/tycoon/movecursor.png

如何使用 javascript 更改此值？提前致谢！ :)

Answer 1

按照你解释的方式，你甚至不需要 javascript？为什么不做类似

的事情

.map:hover{ cursor : url('http://www.iwansfactory.com/tycoon/movecursor.png') }

Answer 2

你可以试试这个，如果你需要js，否则按照上面的css...

      <span onmouseover="changeCursor(this,'http://www.iwansfactory.com/tycoon/movecursor.png');" onmouseout="changeCursor(this,' url("http://www.iwansfactory.com/tycoon/defaultcursor.png"), default');"> Hello World </span>

        function changeCursor(el, cursor)
        {   

             el.style.cursor = cursor;
         }

Answer 3

document.documentElement.style.cursor = 'url("http://www.iwansfactory.com/tycoon/movecursor.png"), default';

Answer 4

如果你想让光标变成移动光标，你可以尝试事件MouseOver来改变鼠标悬停在地图上时的样式，事件MouseOut为return 默认。

Answer 5

您可以为每种光标类型添加 css classes，然后 onmouseenter 事件应用您的游戏逻辑来选择要应用的 css class。

使用 javascript 更改光标样式

changing cursor style using javascript

javascript

cursor