Comment créer un curseur personnalisé avec CSS

Vous pouvez définir un curseur personnalisé à l’aide de la propriété cursor. La propriété cursor prend la liste des curseurs définis par l’utilisateur, séparés par des virgules, suivis du curseur générique.
 
 
D’abord, créez une image de curseur et enregistrez-la avec l’extension .gif ou .png (pour Firefox, Chrome, Safari) et .cur (pour Internet Explorer). Ensuite, appliquez la propriété cursor avec une liste d’URL séparées par des virgules vers ces images. Enfin, terminez cette liste avec un curseur générique, comme dans l’exemple ci-dessous.
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>créer un curseur personnalisé avec CSS</title>
		<style type="text/css">       
			a{
				cursor: url("https://1.bp.blogspot.com/-NmbnDADABUE/XSfhUk_X2yI/AAAAAAAAFFw/5Tp7zt_8erg2AJ-aQ1VhYdH_l4nTReY7wCLcBGAs/s1600/cursor.png"), default;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet, <a href="#">survoler ce lien</a> adipiscing elit.
	</body>
</html>
Résultat
Lorem ipsum dolor sit amet, survoler ce lien adipiscing elit.

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *