Cet article est une continuation de l ‘article sur les curseurs css de base… Alors il sera simple, et sans superflu. Et nous allons y traiter 2 choses :

  • – Les curseurs sur un lien
  • – Les curseurs css personnalisée avec votre propre icone

Curseur css sur un lien

Pour ajouter un curseur css personnalisé sur un lien c’est extrêmement simple… Il vous suffit d’ajouter la propriété « cursor:  » dans la partie a:hover , comme ceci :


a:hover {
cursor:help;
color:orange;
}

Comme vous pouvez le voir, la classe a est une classe un peu particulière qui n’est pas reliée à un code html. On appelle ce genre de classe, une « semie-classe css » car elle n’a pas besoin d’être reliée à du html, le navigateur web comprends et applique instinctivement un style au lien que vous allez définir dans votre feuille de style…

Avec ce bout de code vous dites donc : voilà monsieur google chrome, pour le curseur, vous me choisissez un curseur de type help, et pour la couleur du survolement du lien (qu’on appelle la propriété hover), vous m’affichez ça en orange et que ça saute vite!.

Je ne peux malheureusement pas vous le montrer visuellement car la capture d’écran n’enregistre pas le curseur, mais ça marche, soyez en sur :p

 

Curseur css de lien avec vos propres images d’icônes

Alors avant toute choses, vous avez besoin d’une icone, vous pouvez en trouver gratuitement sur internet, ou créer les votres en les enregistrant sur un logiciel de retouche d’image comme photoshop (il vous faudra un plugin spécial) ou gimp qui le fait nativement…

Voici l’icone que nous allons utiliser pour l’exemple :

 

Comme ce n’est pas une vraie icone, je vais tricher et aller sur mon ftp et changer son nom en passant de renard.png à renard.ico (je change en fait l’extension sur l’endroit ou elle est hébergée) parce que je n’ai pas envie de m’embêter à recréer l’image au bon format. Sachez aussi qu’il est possible d’utiliser des png, gif, svg en fonction de certains navigateurs, au moment où j’écris cet article, vous pouvez y aller sans soucis, la plupart des navigateurs les acceptent.

Ensuite j’ajoute ceci dans ma feuille de style :


a:hover {
cursor: url("https://www.business-de-reve.com/wp-content/uploads/2018/03/renard.ico"), default;
}

ici j’ai repris l ‘adresse directe de l’image pour pas m’embêter, mais vous pouvez bien entendu aussi utiliser l’adresse racine de votre icone… Et vous pouvez utiliser la propriété « cursor: url(« adresse_de_votre_icone »), default; » sur n’importe quelle classe css, c’est à dire si vous le souhaitez sur vos paragraphes, liens, titres, etc.

P-s. n’oubliez pas la propriété default à la fin, sans quoi ça ne marchera pas… Dans les versions moderne, je vois aussi la propriété auto à la place de default, les deux marchent, et l’auto me semble le plus pratique à retenir et à l’usage… Allez à vous de jouer maintenant…

Faites connaître ce cours sur vos réseaux sociaux favoris :