A:hover p{color: yellow;} Ne fonctionne pas

Résolu
Gerik0 Messages postés 8 Statut Membre -  
luckydu43 Messages postés 4497 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
je ne comprend pas pourquoi ce bout de code ne marche pas .. J'aimerais qu'au survole de la balise a, le texte de la balise p change de couleur. 
<html>
   <head>
	<style>
	   a:hover p{color: yellow;}
	</style>
   </head>
   <body>
	<a href=#> Pre </a> 
	<p> Deu </p>
  </body>
</html>

Pouvez-vous me dire ou est le problème ? car la c'est dessus de mes forces ..

3 réponses

  1.
    Grandasse_ Messages postés 965 Date d'inscription   Statut Membre Dernière intervention   611
     
    Bonjour,
    Là il est écrit : "le paragraphe contenu dans le lien devient jaune au survol du lien".
    Or ici les balises a et p ne sont pas imbriquées.

    Il faut utiliser du javascript : 
    <html>
   <head>
   </head>
   <body>
 <a href="#" rel="nofollow noopener noreferrer" target="_blank" onmouseover="toYellow()" onmouseout="undo()"> Pre </a> 
 <p id="cible"> Deu </p>
  </body>
  <script>
    var p = document.querySelector('#cible')
    function toYellow() {
        p.style.color = "yellow"
    }
    function undo() {
     p.style.color = ""
    }
  </script>
</html>


    La ligne 10 récupère la balise p grâce à son id, et ensuite on fait changer le style en fonction de si la souris passe sur le paragraphe ou s'en va.
    (c'est rigolo de jouer avec le DOM aussi)
    Grandasse
    0
  2. Gerik0 Messages postés 8 Statut Membre
     
    "Or ici les balises a et p ne sont pas imbriquées."

    Le problème du code était là, je n'avais pas fait attention à l’hérédité. Merci beaucoup pour ta réponse !

    Bon week-end.
    0
  3. luckydu43 Messages postés 4497 Date d'inscription   Statut Membre Dernière intervention   1 177
     
    Bonjour !

    Ce code fonctionne aussi : 
    <html>
   <head>
	<style>
	   a:hover {color: yellow;}
	</style>
   </head>
   <body>
	<article>
	<a href=#> Pre </a>
	</article>
	<article>
	<a href=#> Deu </a>
	</article>
  </body>
</html>


    -1