Discussion :

[HiRoN]

Bonjour,

Lors d'un petit test, j'ai un lien construit de cette façon :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#" alt="">Test1<span id="titre_spanHeader">Test2</span> Test3</a>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
a { color:black; text-decoration:none; }
a:hover { color:#a09797; }
span#titre_spanHeader{ color:#a09797; }
span#titre_spanHeader:hover { color:black;}

Lorsque je passe la souris sur Test2, Test1 et Test3 change de couleur (effet donné au a:hover), mais lorsque je passe la souris sur Test1 ou Test3, Test2 ne change pas.

Question1 : Comment faire pour changer le style du span lors du hover sur le a ?
Question2 : J'ai appliqué le style sur la balise a (donc balise de base qui s'appliquera à tous les liens a de la page), comment ne le faire que pour 1 a spécifique, contenant une class spécifique ?

Merci d'avance a ceux qui répondront

[pop_up]

Le truc c'est que le selecteur :hover ne fonctionne que sur la balise a pour IE< IE7 je crois ( a verifier)

Tu as testé sous quel navigateur par hasard ? IE ?

Sous firefox 3 ton code fonctionne.

[FraK]

Perso je précise toujours des class sur les a quand je veux quelque chose de bien spécifique, ça alourdit le css c'est sûr, mais ça passe partout. Regarde dans les les Cours et tutoriels pour apprendre CSS : https://css.developpez.com/cours/

[HiRoN]

Le truc c'est que le selecteur :hover ne fonctionne que sur la balise a pour IE< IE7 je crois ( a verifier)

Tu as testé sous quel navigateur par hasard ? IE ?

Sous firefox 3 ton code fonctionne.

Testé sous FF2 & IE7 seulement et l'effet espéré ne fonctionne pas.
Mais donc, comment appliqué un style sur un a prédéfini ?

[HiRoN]

Perso je précise toujours des class sur les a quand je veux quelque chose de bien spécifique, ça alourdit le css c'est sûr, mais ça passe partout.

Ok, donc dans l'idée :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a class="titre_header" href="#" alt="">Test1<span id="titre_spanHeader">Test2</span> Test3</a>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.titre_header { color:black; text-decoration:none; }
.titre_header:hover { color:#a09797; }
span#titre_spanHeader { color:#a09797; }
span#titre_spanHeader:hover { color:black; }

Donc Question 2 = Ok, mais question 1 ?
Dois-je regarder du côté du javascript ?

Le but serai de changer la class du span sur le a:hover (maintenant titre_header:hover)...

[FraK]

A mon avis oui je pense.
Tu vas devoir passer par des conditions if, else if ...
Mais sans certitude, jamais testé

[pop_up]

mais lorsque je passe la souris sur Test1 ou Test3, Test2 ne change pas.

Je comprend pas.

Si tu passe ta souris sur test1 ou test3, tu valide la propriété suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

a:hover { color:#a09797; }

et tes liens restent bien gris

et aussi la propriété utilisée pour ton id reste la suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

span#titre_spanHeader{ color:#a09797; }

Donc pour moi c'est ok non ?

Si tu veux qu'en passant sur test1 ou test3, test2 soit noir alors il faut mettre ceci non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
a { color:black; text-decoration:none; }
a:hover { color:#a09797; }
span#titre_spanHeader{ color:#a09797; }
a:hover span#titre_spanHeader{ color:black;}
span#titre_spanHeader:hover { color:black;}

[HiRoN]

J'ai trouvé
En rajoutant un div qui englobe le tout et lui appliquant un ID.
Du coup, je peux jouer sur l'id qui englobe le a et le span...

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="header"><a href="#" alt="">Test<span>Test2</span>Test3</a></div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#header a, #header a:hover span { color:black; text-decoration:none; }
#header a:hover, #header a span { color:#a09797; }

Merci quand même pour vos réponses...