CODEWITHSUNDEEP
cssgwtlibgdx
mattboy
mattboy

Reputation: 2910

Custom mouse cursor with CSS in GWT

I'm using libgdx to deploy a GWT app. I'm guessing that the issue has more to do with GWT rather than libgdx since I'm working directly with GWT code and CSS for this.

I want to set the mouse cursor based on an image using CSS, but I can only get it to work with the predefined cursors.

I change the cursor from the code like this:

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

I've also tried with addStyleName("mycursor") which gives the same result.

Below are some CSS examples of what's working and not working. Note that the problem does not appear to be with the URL path of the image file, since I can use the same path for setting the background. 

/* 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 */
}

When testing the CSS outside of GWT it works fine to set the mouse cursor from an image like this, so I really can't find a reason why this shouldn't work.

Am I missing something, or does GWT (or possibly libgdx) just not like using images for cursors?

Upvotes: 2

Views: 1246

Answers (1)

Churro
Churro

Reputation: 4366

Make sure you link to your cursor image properly. Once you do that, setStyleName("myCursor"); should work.

I just tried this Grand Theft Auto cursor I found on some blog, and it worked:

.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.

See this link and this link for more help.

Upvotes: 4

Related Questions