Question

我一直在使用：

    <script>
function change()
{
document.body.style.cursor="url('xx/xx.cur'),auto";
}
</script>

<div onClick="change()"></div>

它有效，但重要的是光标在没有点击时重置，所以我尝试了onBlur，但它没有用。

最后我发现了这个：

<script type="text/javascript"> 
   function change() { 
   document.body.style.cursor=(document.body.style.cursor=="help") ? "default" : "help"; 
} 
</script> 
</head> 
<body> 
<div onmousedown="change()" onmouseup="change()">  </div>

就像一个魅力，但它无法用自定义.curs。

替换游标标准样式

下面：

    function change()
{
document.body.style.cursor=(document.body.style.cursor=="url ('xx/xx3.cur')") ? "url ('xx/xx1.cur')" : "url ('xx/xx3.cur')";
}
</script>
</head>
<body>

<div onmousedown="change()" onmouseup="change()" id="container">

显然双括号很麻烦。我尝试了一切都没有成功。任何帮助apreciated。提前谢谢。

Answer 1

我可能会用一些简单的css魔法解决这个问题。

我没有用javascript为body.style.cursor分配一个值，而是在html-tag上切换一个类，然后再显示正确的光标。

CSS：

html
{
    cursor: default;
}

html.help
{
    cursor: url('help.cur');
}

使用Javascript：

function change()
{
    $("html").toggleClass("help")
}

工作jsfiddle：http://jsfiddle.net/BV3kn/2/

javascript onclick自定义光标

1 个答案: