javascript - 光标：鼠标抓取 javascript

Question

我有两张图片：一张张开的手，一张抓着的手。我希望一个简单的“onmousedown”和“onmouseup”功能可以帮助您制作您可以在谷歌地图之类的东西中看到的著名的抓手。但是......对不起，从一开始：我有一个简单的 DIV，除了他的背景之外什么都没有。当我按住鼠标并开始“拖动”光标时，应该启动一个功能并将光标从“手打开”更改为“手抓”。但是光标变成了文本的选择器，而不是我想要的。有什么帮助吗？这是一个例子

<div onmousedown="function(){this.style.cursor='url(handgrab.png)'}"
onmouseup="function(){this.style.cursor='url(handopen.png)'}"
</div>

我唯一想要的是将鼠标拖入 DIV 时更改光标。对不起这个内联选择，但我不想写所有的 JS 文件......

Answer 1

您应该通过类名访问它。它使生活更轻松。

试试这种方式： -

HTML：

<div onmouseup="this.className='openHand'" onmousedown="this.className='closeHand'">
    Mouse Down and Up Events
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

.​openHand​ {
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

.closeHand {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}​

参考现场演示