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

Résolu
Gerik0 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   -  
luckydu43 Messages postés 4259 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

Réponse 1 / 3
Grandasse_ Messages postés 924 Date d'inscription   Statut Membre Dernière intervention   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 Date d'inscription   Statut Membre Dernière intervention  
 
"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 4259 Date d'inscription   Statut Membre Dernière intervention   1 057
 
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