Hover sur Background-image

**rems033** · 14/12/2007, 10h05

Salut à tous,
Je suis un newbie du CSS et j'aurais aimé savoir s'il serait possible de creer un div avec un background-image et d'associer une nouvelle background-image lorsque la souris passe au dessus et tout ca sans tableau et Javascript (uniquement des div et un fichier CSS associé)...
Merci pour vos réponses et bonne matinée!

**alexp** · 14/12/2007, 10h39

c'est tout à fait possible, voila ce que j'utilise dans ma feuille de style css :

Code :

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

1
2
div#menu li {background:#CCCCCC url("images/c4.gif");}
div#menu li:hover {background: #353533; color:yellow; }

**Bisûnûrs** · 14/12/2007, 10h41

Envoyé par alexp

c'est tout à fait possible, voila ce que j'utilise dans ma feuille de style css :

Code :

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

1
2
div#menu li {background:#CCCCCC url("images/c4.gif");}
div#menu li:hover {background: #353533; color:yellow; }

Ne fonctionne pas sur IE6.

**rems033** · 14/12/2007, 17h23

Merci a tous pour vos réponses....
Vous allez râler mais j'ai trouver une autre solution en utilisant les propriétés onmouseover et onmouseout de la balise <img>
Merci encore pour vos réponses et a bientot!

**Bisûnûrs** · 14/12/2007, 10h40

Code html :

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

1
2
3
<div class="rollover">
   <a href="#">&nbsp;</a>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.rollover{
   width:300px;
   height:100px;
}
.rollover a{
   display:block;
   width:100%;
   height:100%;
}
.rollover a:link, .rollover a:visited{
   text-decoration:none;
   background:url(image1.gif);
}
.rollover a:hover{
   text-decoration:none;
   background:url(image2.gif);
}

En revanche je te conseille de faire une seule image pour laquelle tu ne modifies que la position. Ca permet que l'effet de rollover soit instantané et que le navigateur n'ait pas à charger deux images.