Discussion :

[oneTime]

Bonjour, bonjour !

J'ai une question toute simple : comment puis-je ajouter un rollover sur mon div ?

HTML

Code :

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

1
2
 
<a href="index.php"><span id="inscription"><div id="btn_inscription"></div></span></a>

CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
div#btn_inscription {
background:url(../img/boutons/inscription.png);
width:110px;
height:30px;
float:left;
}
 
span#inscription:hover {
background:url(../img/boutons/inscription_hover.png);
}

Je pense que c'est faisable avec CSS en utilisant :hover mais comment ?

Merci de m'éclairer

[FraK]

exemple :

CSS

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
18
19
 
.bouton{
width: 100px;
height: 50px;
display: block;
float: left;
background-image: url(image1.gif);
background-repeat: no-repeat;
}
 
a.bouton{
display: block;
}
 
a.bouton:hover{
display: block;
background-image: url(image2.gif);
background-repeat: no-repeat;
}

HTML

Code :

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

1
2
 
<div class="bouton"><a href="#" class="bouton"></a></div>

[oneTime]

Ce qui donne :

CSS

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
18
19
20
21
22
23
24
25
26
27
28
29
 
.btn_head {
width:110px;
height:30px;
}
 
a.btn_head {
display:block;
}
 
div#inscription {
background:url(../img/boutons/inscription.png);
float:left;
}
 
a#btn_inscription:hover {
display: block;
background:url(../img/boutons/inscription_hover.png);
}
 
div#connexion {
background:url(../img/boutons/connexion.png);
margin-left:115px;
}
 
a#btn_connexion:hover {
display: block;
background:url(../img/boutons/connexion_hover.png);
}

HTML

Code :

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

1
2
3
 
<div id="inscription"><a href="index.php" id="btn_inscription" class="btn_head"></a></div>
<div id="connexion"><a href="index.php" id="btn_connexion" class="btn_head"></a></div>

Si ça peut aider quelqu'un

Merci FraK !

[FraK]

Aucuns soucis, on est là pour ça ^^