Signaler

A:hover p{color: yellow;} Ne fonctionne pas [Résolu]

Posez votre question Gerik0 8Messages postés samedi 15 avril 2017Date d'inscription 7 juin 2017 Dernière intervention - Dernière réponse le 15 avril 2017 à 17:49 par luckydu43
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 ..
Utile
+0
plus moins
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)
Donnez votre avis
Utile
+0
plus moins
"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.
Donnez votre avis
Utile
-1
plus moins
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>


Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !