当我将鼠标放在 JavaScript 上的对象上时更改鼠标光标

Question

您好，我正在为我的客户开发一个网页。

当用户在对象上按下鼠标时，我想更改其光标图标。 例如，

1. 网页上有图片
2. 用户单击图像，其光标也应更改为“抓取”
3. 用户可以拖放图像位置
4. 最后当用户鼠标抬起时，其鼠标光标必须更改为“默认”

我尝试了上面的这些步骤。 但是当用户鼠标按下时我无法更改光标。

JavaScript 可以在那个时间更改鼠标光标吗？ 如何？

顺便说一句，我总是看到“在悬停事件上更改光标”，但我找不到上面相同的情况。

Answer 1

如果你有 html 元素，你可以只使用 CSS cursor属性。

如果你真的需要使用 javascript ：

document.yourSelector.style.cursor = "grabbing";

但你不应该需要：

.yourImages:active { /* When mouse is down */
    cursor:grabbing;
}

Answer 2

使用:active 伪选择器。

 .img:active { cursor: grab; }

 <img src="https://via.placeholder.com/200x150,jpg" class="img">