hover

Le sélecteur :hover permet de modifier le css d'un élément lorsque la souris survole cet élément.

Exemple : modifier la couleur

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> couleur  </title>
        <style>
        
        p{ /* fond du paragraphe lorsqu'il n'est pas survolé */
            background-color: yellow;/*jaune*/
            width:200px;
            }
         p:hover{ /* fond du paragraphe lorsqu'il  est  survolé */
            background-color: pink;/*rose*/
         }
         
         /* au survol, un contenu texte apparaît en fin de paragraphe avec after : */
         p:hover::after{content: ' Ah, non ?!';}
        </style>
    </head>
    <body>
          <p>  Je suis un paragraphe à fond jaune. </p>
          
          
    </body>
</html>

Exemple : élément qui apparaît au survol.

Nous avons vu ci-dessus comment ajouter du texte en fin de paragraphe lors du survol.

Nous voyons ici un code faisant apparaître un paragraphe au survol du paragraphe qui le précède.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> coucou  </title>
        <style>
         body{height: 200px;}
         p{ /* fond du paragraphe lorsqu'il n'est pas survolé */
            background-color: yellow;/*jaune*/
            width:200px;
            }
         p:nth-of-type(2), p:nth-of-type(4), p:nth-of-type(5)  {
            display:none; /*les paragraphes 2, 4, 5 sont par défaut invisibles */
            background-color: pink;/*jaune*/
         }
         p:hover+p{  /* mode affichage block 
         pour tout paragraphe suivant immédiatement un 
         paragraphe survolé */ 
             display: block;
         }
         
          
        </style>
    </head>
    <body>
          <p>  Je suis le paragraphe 1. </p>
          <p>  Je suis le petit frère du paragraphe 1. </p>
          
           <p>  Je suis le paragraphe 2. </p>
           <p>  Je suis un petit frère du paragraphe 2 (mais aussi du 1, mais pas immédiat pour le 1). </p>
           <p>  Je suis un petit frère du paragraphe 2 mais pas immédiat. </p>
          
    </body>
</html>

Exemple : modification au survol avec transition.

Avec la propriété transition (voir la page w3schools), le changement d'état peut être moins brutal.

Survolez le lien en laissant la souris sur le lien pendant quelques secondes.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> transition  </title>
        <style>
          
         a{  
            text-decoration: none;
            color: orange;
            font-weight: bold;
            font-size: 13px;
            border: 1px solid red;
          }
          
          
          
         a:hover{   
            font-size: 20px;
            transition: font-size 3s;/* le passage de 13px à 20 se fera en 3 secondes */
         }
         
          
        </style>
    </head>
    <body>
           <a href="http://www.w3schools.com/css/css3_transitions.asp"> les transitions </a>
          
    </body>
</html>