Why my image don't appear as a cursor ? I tried everything but it dont appear-CodePudding

I'm trying to put my mouse with an image as cursor, to do that I try to "cursor:url" with * elements, it just don't work with this image.

`<!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pourquoi ça marche pas ?!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img src="image/arc-en-ciel.jpg" alt="">
    <img src="image/grenouille.png" alt="">
    <img src="image/grenouillerougelogo.png" alt="">
    <img src="image/grenouillette.jpg" alt="">
    <img src="image/homard.jpg" alt="">
    <img src="image/jaune.jpg" alt="">
    <img src="image/linPailleté.png" alt="">
    <img src="image/Multi Homards.jpg" alt="">
    <img src="image/NewYork.png" alt="">
    <img src="image/pain.jpg" alt="">
    <img src="image/pasDeCourse.jpg" alt="">
    <img src="image/sac bleu.png" alt="">
</body>
</html>


img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
*{
    cursor: url("image/grenouillerougelogo.png");
}`

enter image description here

CodePudding user response：

firstly, you need to provide a fallback cursor after your URL.

secondly, make sure you're using a small image, i believe the size limit is 128x128.

see below snippet using a fallback and a small enough image:

html, body {
  cursor: url(https://icons.iconarchive.com/icons/roundicons/100-free-solid/16/target-icon.png), pointer;
}

CodePudding user response：

Does the problem happens with any of the images, or that in specific? Did you tried to use full url, not only the relative one?