[résolu] Hover sur toute la longueur d'un div

Bonsoir à tous,

je ne trouve pas l'astuce pour changer le background-color d'un div lorsque la souris passe dessus...

Voici mon code :

<style type="text/css">
<!--
.lien {
	background-color:#FFFFFF
}
.lien:hover {
	background-color:#006666;
}
-->
</style>

<div class="lien"><a href="http://www.blabla.fr/">www.blabla.fr</a></div>

Y a un truc que j'aurais pas compris ?

Merci d'avance.
Modifié par Tchupacabra (17 Jan 2006 - 00:05)

Tchupacabra a écrit :

Voici mon code :

<style type="text/css">
<!--
.lien {
	background-color:#FFFFFF
}
.lien:hover {
	background-color:#006666;
}
-->
</style>

ton code me parrait correct, par contre ton problème vient sans doute du fait qu'Internet Explorer n'interprête la pseudo-classe ":hover" que sur les liens (balise <a>).

Tu dois donc changer ton <div> en <a> ou alors utiliser du javascript.

Salut,
IE va pas bien interpréter ton code.
Je te propose le code css suivant :

<style type="text/css">

.lien a {
	background-color:#FFFFFF
}
.lien a:hover {
	background-color:#006666;
}

</style>

Ne change pas ton HTML

Merci à vous pour vos réponses !

Malheureusement c'est pas encore bon...

voici mes tests :

div.lien2 a:link {
	background-color:#FFFFFF
}
div.lien2 a:hover {
	background-color:#006666;
}

div.lien3:link {
	background-color:#FFFFFF
}
div.lien3:hover {
	background-color:#006666;
}

.lien4 a:link {
	background-color:#FFFFFF
}
.lien4 a:hover {
	background-color:#006666;
}

pour le moment y a que le lien3 sous Firefox qui m'affiche ce que je souhaite... ce qui rejoint la remarque de the_penguin sur l'interprétation de :hover sous IE.

D'autre idées parceque moi je tourne en rond...

utilise une image en fond

voici un exemple :

a.btn
{
display: block;
border:0px;
padding:0px;
margin:0px;
height:19px;
width:200px;
background: url("../img/btn_menu_0.gif") no-repeat 0px 0px;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#efefef;
font-weight:bold;
}

a.btn:hover
{
padding:0px;
margin:0px;
height:19px;
width:200px;
background: url("../img/btn_menu_1.gif") no-repeat 0px 0px;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
font-weight:bold;
}

et dans ton html tu met seulement

<a href="tapage" class="btn" accesskey="2">tonlien</a>

ca regle le probleme du hover sous IE et ca fonctionne très bien

lol je suis peut etre hors sujet lol

C'est bon j'ai trouvé !!!!

div id="links">
    <a href="http://www.blabla.fr/">www.blabla.fr</a>
    <a href="mailto:developpement@blabla.fr">developpement@blabla.fr</a>
</div>

avec :

div#links a {
	display: block;
}
div#links a:link {
	color: #006666;
	background-color:#FFFFFF
}
div#links a:hover {
	color: #FFFFFF;
	background-color:#006666;
}

@+