Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Gerik0 Messages postés 8 Date d'inscription samedi 15 avril 2017 Statut Membre Dernière intervention 7 juin 2017 - 15 avril 2017 à 16:18
luckydu43 Messages postés 3985 Date d'inscription vendredi 9 janvier 2015 Statut Membre Dernière intervention 23 décembre 2024 - 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 ..

3 réponses

Réponse 1 / 3
Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 595
Modifié le 15 avril 2017 à 17:00
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 samedi 15 avril 2017 Statut Membre Dernière intervention 7 juin 2017
15 avril 2017 à 17:10
"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 3985 Date d'inscription vendredi 9 janvier 2015 Statut Membre Dernière intervention 23 décembre 2024 983
15 avril 2017 à 17:49
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