Un fond changeant de couleur en rollover

bonjour à tous,

j'ai un rectangle en aplat de couleur, et dedans se trouve un lien.
J'aimerais que le fond change de couleur lorsque le curseur le survole, et sans que l'on voit la main hypertexte apparaitre...
bien sûr le lien restant actif avec des propriétés de réactions également.

J'ai du mal à concevoir la syntaxe, j'ai essayé ceci, mais ça ne fonctionne pas à cause du lien texte

<div class="fond"><a href="" target="">
<div class="titre"><img src="images/arrow.jpg" width="13" height="12"> pwet</div>
<div class="text">
<br>
<a href="http://www.pwet.net" target="_blank">text text text</a>
</div></a>
</div>

.fond{
	margin: 0 0 0 8px;
	padding: 0 0 10px 0;
	width: 585px;
	background: #c1c1ee;
	text-align: center;
}
.fond a:hover{
	margin: 0 0 0 8px;
	padding: 0 0 10px 0;
	width: 585px;
	background: #d4d4f0;
	text-align: center;
}

Modifié par foeb (22 Aug 2006 - 11:31)

c'est bon, j'ai trouvé la solution, si ça peut servir à d'autres:

.fond:hover{
margin: 0 0 0 8px;
padding: 0 0 10px 0;
width: 585px;
background: #d4d4f0;
text-align: center;
}

enlever le a du lien
Modifié par foeb (22 Aug 2006 - 15:01)

Salut,

Attention : excepté pour le a, la propriété :hover ne prend pas effet sous IE.

A part une bidouille CSS que je ne connais pas, je vois que du javascript pour faire ça...mais je peux me tromper...
Modifié par Hum (22 Aug 2006 - 15:53)

Si le lien doit prendre toute la surface de l'aplat coloré (qui correspond à la division parente, si j'ai bien compris), alors il suffit de passer le lien en display:block et d'appliquer la couleur de fond au lien et non pas au conteneur.

Un petit schéma de l'effet voulu serait un plus.

aucun souci dans ff ou ie: preuve à l'appui

foeb a écrit :
aucun souci dans ff ou ie: preuve à l'appui

Deux chose :
1 - L'effet au survol (les propriétés attribuées au bloc de classe "fond" via la pseudo-classe :hover) ne fonctionnent pas sur Internet Explorer 6. La pseudo-classe :hover est peut-être prise en compte par IE7b3, mais pas par IE6. Et aux dernières nouvelles, 70 à 80% des utilisateurs utilisent toujours IE6.
2 - Il serait utile d'utiliser des titres de section (h1, h2, etc.) et des paragraphes (p), plutôt que des <div class="titre"> et <div class="texte">. Un peu de balisage sémantique, que diable !

ui cher ami tu as raison! je n'en fait qu'à ma tête

---
il a bon dos le diable!
Modifié par foeb (22 Aug 2006 - 18:42)

bonjour,

pour IE6 un peu de dhtml eventuellement pour repliquer le comportement :hover .

<div class="fond" onmouseover="(this.style.background='#d4d4f0');" onmouseout="(this.style.background='#c1c1ee');">

sinon , s'en passer peut-etre ?

++