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

Gerik0 8 Messages postés samedi 15 avril 2017Date d'inscription 7 juin 2017 Dernière intervention - 15 avril 2017 à 16:18 - Dernière réponse : luckydu43 2921 Messages postés vendredi 9 janvier 2015Date d'inscription 16 janvier 2018 Dernière intervention
- 15 avril 2017 à 17:49
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 ..
Afficher la suite 

3 réponses

Répondre au sujet
Grandasse_ 808 Messages postés jeudi 28 janvier 2010Date d'inscription 16 janvier 2018 Dernière intervention - Modifié par Grandasse_ le 15/04/2017 à 17:00
0
Utile
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
Commenter la réponse de Grandasse_
Gerik0 8 Messages postés samedi 15 avril 2017Date d'inscription 7 juin 2017 Dernière intervention - 15 avril 2017 à 17:10
0
Utile
"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.
Commenter la réponse de Gerik0
luckydu43 2921 Messages postés vendredi 9 janvier 2015Date d'inscription 16 janvier 2018 Dernière intervention - 15 avril 2017 à 17:49
-1
Utile
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>


Commenter la réponse de luckydu43