Cursor code, not showing the custom cursor set. CSS-CodePudding

pretty new to CSS and HTML and was hoping somebody could help me fix this. I wanted to be able to change the icon for the cursor although when I run the code, simply no change. A few visits to chatGPT hasnt done me much either. Here's my code:

body2 {
  cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto;
}

And yes, it is 32x32.

I've tried moving it to different classes, changing words, changing everything. Although nothing has worked.

CodePudding user response：

You are using the wrong css declaration, your code will only work if you have defined a custom html element having <body2> as tag.

What you probably want is:

body { ... }
applied to <body> tag

or a css class

.body { ... } applied to or any other tag having body as class.

or a css id

#body { ... } applied to or any other kind of tag with body as id.

Alternatively check in the browser console if the rule is applied and if the image path is resolved correctly.

CodePudding user response：

here is a good reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?retiredLocale=de

So basically you try to applie to a body2 HTML element you're CSS code. If its a class try the CSS selector .body2 {} or in the case its an id of a HTML element #body2 {}.

In you're css you've got one main picture and the second one as fallback. Just make sure you set the correct path corresponding to the location of you're CSS file. To ensure that, you can also try the full path instead of the relativ one like C:\Users\xxx\Smile_icon_32x32.png

CodePudding user response：

Here is an example where http://example.com/32x32/990000/fff.png&text=PNG don't exist and https://dummyimage.com/32x32/009900/fff.gif&text=GIF exist so the gif will be used instead of the png :

        .body2 {
            display:inline-block;
            cursor: url("http://example.com/32x32/990000/fff.png&text=PNG"),url("https://dummyimage.com/32x32/009900/fff.gif&text=GIF"), auto;
        }

    <div >display</div>