Comment créer un curseur personnalisé avec CSS

juillet 12, 2019février 10, 2020 Amine KOUIS Aucun commentaire

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>