Comment changer le fond et la couleur du texte de la souris

Modification du fond et la couleur du texte lorsque l'utilisateur passe la souris sur une zone sur votre site est utile non seulement à des fins de conception, mais aussi pour fournir une rétroaction visuelle pour l'interaction de l'utilisateur, ce qui augmente la facilité d'utilisation de votre site web. Cette technique est généralement utilisée pour les liens, mais peut également être appliquée à tout autre texte, ou même d'autres éléments de conception de sites Web, y compris les tables, des diviseurs et des listes. Alors que les scripts Java peut accomplir cette tâche, une méthode plus efficace et plus simple est d'utiliser des feuilles de style en cascade (CSS) avec le ": Hover" pseudo-classe dynamique.

Choses que vous devez

  • Un éditeur HTML tel que Notepad

Instructions

  1. 1



    Ecrire le code HTML pour les éléments que vous voulez l'utilisateur d'interagir avec. Notez que vous pouvez appliquer l'effet de survol à tous les éléments d'un certain type, ou tous les éléments d'une certaine classe, ou des éléments spécifiques d'un ID donné. Assurez-vous d'identifier vos éléments correctement. Exemples:
    Tout lien et son fond qui change de couleur
    Un lien en classe "tournez-rouge" et son fond qui change de couleur
    Un lien avec l'ID de "unique de couleurs" et son fond qui change de couleur

  2. 2

    Ecrire les règles de style dans le section de la page. Vous pouvez définir tous les styles, y compris la couleur du texte et la couleur de fond en désignant un style à la pseudo-classe ": Hover." Exemples (élément, la classe et les types d'identification respectivement):
    a: hover {color: background-color bleus: blancs}
    a.turn-rouge: hover {color: background-color rouges: noir}
    un cadre unique-couleur #: hover {color: background-color pourpre: jaune}

  3. 3



    Publier la page Web et de tester les paramètres.

Conseils & Avertissements

  • Notez que si vous utilisez l'a: link et a: styles visités dans vos définitions de style, vous devez placer l'une: définition de style de vol stationnaire après-ci.
  • Veillez à tester votre page Web sur différents navigateurs et différentes versions. Les navigateurs plus anciens peuvent ne pas rendre votre page Web correctement, bien que cette méthode fonctionnera pour la majorité des utilisateurs du Web, même si elles ont désactivé javascript.
» » » » Comment changer le fond et la couleur du texte de la souris