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");
}`
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?