• Curseur au survol du header

    Bonjour les enfants! Vous vous rappelez quand j'avais expliqué comment changer son curseur? Non? Ah bon. Clique là alors.

    Ici, c'est une espèce de patch pour compléter le précédent article. En effet, j'ai trouvé comment faire pour que le curseur que vous avez choisi pour le survol de vos lien, s'active également au survol du header mais également des boutons, champs et petits ronds des sondages -en fait je crois bien avec tout ce avec quoi il est possible d'interagir sur une page.

    Vous vous rappelez la ligne A:hover {cursor: url('BLABLABLA'),auto;} ?

    C'est sur celle-là qu'on va modifier un truc.

    On va simplement remplacer a:hover par a:hover, input:hover, #header-link:hover.

    Maintenant, la petite explication pour ceux et celles qui veulent comprendre:

    A est le sélecteur pour les liens, jusque-là tout va bien. #header-link est le sélecteur pour le lien du header (c'est un privilégié il a un sélecteur pour lui tout seul '^').
    input est le sélecteur pour les éléments de type input. Bravo vous l'auriez pas deviné tout/e seul/e, et donc un élément de type input c'est quoi?
    Si mes connaissances limitées sont correctes, un élément de type input est un élément avec lequel on va pouvoir interagir sur la page, mais qui ne ramène pas forcément à une autre page. Des input couplés permettent par exemple d'entrer un message et de l'envoyer, ou de sélectionner une réponse parmi plusieurs (pour un sondage par exemple).
    Par exemple, un champ de texte est un élément de type input. Un bouton aussi. Etc.

    Je ne prétends pas avoir cerné tous les secrets de l'input, mais c'est ce qu'on a besoin de savoir pour cette petite modification qui évitera qu'une petite main s'invite au survol de votre header, mais aussi de vos boutons et champs de texte.

    :hover est la pseudo-classe qui permet de spécifier que l'élément doit être survolé pour que l'effet s'applique.

    Voilà o/ espérant que cet article vous aura plus, aura pu vous être utile etc.


  • Commentaires

    1
    Mercredi 5 Octobre 2016 à 15:52

    Super tutoriel! Merci! ^^

      • Mercredi 5 Octobre 2016 à 20:12

        Merci :)
        Et avec grand plaisir!

    2
    Samedi 10 Février 2018 à 18:46

    Wow ! Merci pour cette astuce ! Depuis le temps que je voulais résoudre ce problème  ! Sympa !

    3
    Vendredi 2 Mars 2018 à 19:35

    Je suis content d'avoir pu t'aider. Merci pour ton commentaire :3

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :