Discussion :

[Chiwawa]

Bonjour, j'ai un petit problème. Je doit faire changer la couleur d'un texte si l'on met sa souris sur une image ou sur un lien adjacent voici le texte / image en question.

Code :

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

1
2
3
4
5
6
7
 
<div class="cabine">
<a href="http......."><img src="./imageblabla.jpg" /></a>
blabla<br/>
blablabla<br/>
<a href="http.......">En savoir +</a>
</div>

Ce que je veu exactement est de faire changer la couleur du texte si l'on place sa souris sur l'image ou le lien et SEULEMENT SI.

J'ai deja essayé en utilisant un hover sur la class 'cabine' pour changer la couleur, puis un autre hover sur le texte pour le remettre a sa couleur d'origine, mais si l'on est dans l'espace vide le texte reste de la meme couleur... et si je met un autre div qui englobe le texte... il y a un probleme avec le lien...

en gros j'aimerais bien savoir si quelqu'un pourais aurais une solution CSS, sinon je devrai incorporer du javascript... et ca ne me tente pas.

[nsanabi]

je ne pense pas que cela soit faisable en css.

tu devra recourir à du javascript
quelque chose de ce genre :

Code :

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

1
2
3
4
5
6
7
 
<div id="cabine" class="cabine">
<a href="http......." onmouseover="document.getElementById('cabine').style.color='red'"onmouseout="document.getElementById('cabine').style.color='black'"><img src="./imageblabla.jpg" /></a>
blabla<br/>
blablabla<br/>
<a href="http......." onmouseover="document.getElementById('cabine').style.color='red'" onmouseout="document.getElementById('cabine').style.color='black'">En savoir +</a>
</div>

te reste à l'adapter en plus propre

[Chiwawa]

c'est bien ce que je craignais
j'aime bien éviter le javascript le plus possible... mais bon merci quand même !

[Erwan31]

Bonjour,
mieux vaut externaliser les gestionnaires d'évènements si tu peux.
Ton code peut être amélioré... et tu oublies les 3 attributs minimum (en plus de src) de l'image.

[CCyrillus]

bonjour,

sinon tu peut faire avec les selecteurs pour les navigateurs recents :

Code :

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

a:hover , a:hover + a {color:blue;}

ou

Code :

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

div#cabine a:hover  ,  div#cabine a:hover + a {color:purple;}

[nsanabi]

bonjour,

sinon tu peut faire avec les selecteurs pour les navigateurs recents :

Code :

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

a:hover , a:hover + a {color:blue;}

ou

Code :

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

div#cabine a:hover  ,  div#cabine a:hover + a {color:purple;}

il ne veux pas changer la couleur des liens mais celle du text dans sa div

[Emyleen]

Pourquoi tu ne fais pas un .cabine:hover?
Cela changera la couleur quand on passera sur la div, ça changera la couleur du texte, et si tu ne veux pas que ton <a> change de couleur, tu fais un a:hover avec la même couleur que le a. Même si je pense que ça ne la changerai pas.

Soyons plus clair voici ton code :

Code html :

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

1
2
3
4
5
6
<div class="cabine">
<a href="http......."><img src="./imageblabla.jpg" /></a>
blabla<br/>
blablabla<br/>
<a href="http.......">En savoir +</a>
</div>

Voici ma proposition de css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<style>
.cabine {
  color: #000000; /*Couleur noire */
}
.cabine:hover {
  color: #555555; /*Changement de couleur quand on passe sur la div*/
}
a, a:hover {
  color: #000000;
}
</style>