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

Résolu
Gerik0 Messages postés 8 Statut Membre -  
luckydu43 Messages postés 4593 Statut Membre -
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

Réponse 1 / 3
Grandasse_ Messages postés 1155 Statut Membre 597
 
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
Réponse 2 / 3
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
Réponse 3 / 3
luckydu43 Messages postés 4593 Statut Membre 1 068
 
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