在 GWT 中使用 CSS 自定义鼠标光标

Question

我正在使用 libgdx 部署 GWT 应用程序。我猜这个问题更多地与 GWT 而不是 libgdx 有关，因为我直接使用 GWT 代码和 CSS 来解决这个问题。

我想使用 CSS 根据图像设置鼠标光标，但我只能让它与预定义的光标一起工作。

我像这样从代码中更改光标：

RootPanel.get().setStyleName("mycursor"); 

我也尝试过 addStyleName("mycursor") ，它给出了相同的结果。

以下是一些有效和无效的 CSS 示例。请注意，问题似乎与图像文件的 URL 路径无关，因为我可以使用相同的路径来设置背景。

/* Does not work */
.mycursor *, .mycursor .absolutelyPositioned  {
    cursor: url("cursor.png"); 
}

/* Works */
.mycursor *, .mycursor .absolutelyPositioned  {
    cursor: move; 
}


/* The image file is found and working! */
body {
    background-image:url("cursor.png"); /* <-- Works*/
    cursor: url("cursor.png"); /* <-- Does not work */
}

在 GWT 之外测试 CSS 时，可以很好地从这样的图像设置鼠标光标，所以我真的找不到为什么这不起作用的原因。

我是否遗漏了什么，或者 GWT（或者可能是 libgdx）只是不喜欢使用图像作为光标？

Answer 1

确保正确链接到光标图像。一旦你这样做了，setStyleName("myCursor"); 应该可以工作。

我刚刚尝试了在某个博客上找到的这个侠盗猎车手游标，它确实有效：

.myCursor {
    cursor: url(http://i696.photobucket.com/albums/vv323/RoamPT/mouse.png), auto;
}

Here's a CodePen link so you can play around with it.

请参阅 this link 和 this link 以获得更多帮助。