[RESOLU] Au survole d'une image, mon texte ne change pas de couleur

Bonjour,

J'ai un problème de survol entre un texte et une image.

J'ai une image à droite et un texte à gauche.
Quand je survole soit mon image ou alors mon texte, les deux doivent avoir un :hover de couleur dans le css.

L'image à un border et le texte en bold et d'une autre couleur.

Voici le code:

<li class="action-accueil">
													<div class="visuel">
														<a href="#">
															<img src="images/centre/img_list_blc1.jpg" alt="forum vie emploi">
														</a>
													</div>
													<div class="texte">
														<a href="#">Forum Vie Emploi</a>
													</div>
												</li>

Et le code css:

.action-accueil .visuel, .action-accueil .texte {
	float:left;
}

.action-accueil .texte {
	padding-left:5px;
	margin-top:9px;
	color:#39515f;
}

.action-accueil a {
	color:#39515f;
	text-decoration:none;
}

.action-accueil a:hover {
	color:#03a4f4;
	font-weight:bold;
}
.action-accueil {
	display:block;
	clear:both;
}

.action-accueil a img {
	border:#EFFCFE solid 2px;
}

.action-accueil:hover a img {
	border:#03a4f4 solid 2px;
}

Pour le moment, lorsqu'on survole le texte, le border sur l'image apparait bien.
Par contre, lorsqu'on survole l'image, le texte ne change pas de couleur...

Je ne sais pas si c'est très clair... N'hésitez pas à me poser des questions plus précises.

Merci d'avance.
Leeloo
Modifié par l33l00 (08 Jan 2010 - 10:25)

Bonsoir,

l33l00 a écrit :
J'ai une image à droite et un texte à gauche.

Effectivement. Dans deux liens séparés. C'est voulu d'avoir deux liens différents? Alors même que tu veux appliquer un effet au contenu des deux liens en même temps, que tu survoles l'un ou l'autre? Ça ressemble à une erreur de conception, ça.

Tu as la structure suivante:

<div class="visuel"> 
  <a href="#"> 
    <img src="images/centre/img_list_blc1.jpg" alt="forum vie emploi"> 
  </a> 
</div> 
<div class="texte"> 
  <a href="#">Forum Vie Emploi</a> 
</div>

alors que la logique dicterait ceci:

<a href="#"> 
  <img src="images/centre/img_list_blc1.jpg" alt="">
  Forum Vie Emploi
</a>

Et encore, l'image pourrait être un background CSS.

non, ce n'était pas voulu...

Donc j'ai bien mis un seul lien pour l'image et le texte. Comme dans ton exemple.
Mais je n'arrive toujours pas a régler le problème.

L'image ne peut pas être en background css, parce que l'image va être administrable via un cms.

Merci pour ton aide, cela résout un petit peu mon soucis.

Enfin ça marche!

En fait j'avais inversé

.action-accueil a:hover

et

.action-accueil:hover a

Merci beaucoup pour votre aide. Maintenant quand je survole le texte ou l'image, les deux ont leur effets de survole.