1 pièce(s) jointe(s)
z-index sur élément suivant dans une liste
Bonsoir,
Je rencontre un léger problème pour mettre en premier plan un élément a dans une liste par rapport à l'élément a qui le suit.
Mon but est de faire un petit effet en agrandissant légèrement l'élément survolé dans une liste de numérotation de page.
J'ai mit une image pour bien comprendre le problème.
Le code en question :
Code:
1
2
3
4
5
6
7
| <ul class="pagination">
<li><a href="page.php?page=1#com" class="">1</a></li>
<li><a href="page.php?page=2#com" class="">2</a></li>
<li><a href="page.php?page=3#com" class="">3</a></li>
<li><span>4</span></li>
<li><a href="page.php?page=5#com" class="">5</a></li>
</ul> |
Code:
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| ul.pagination{
background: none;
border: none;
list-style-type: none;
font-size: 13px;
height: 22px;
z-index: 1;
}
ul.pagination li{
position: relative;
float: left;
text-align: center;
z-index: 1;
width: 16px;
height: 22px;
}
ul.pagination li span{
font-weight: 700;
display: block;
width: 16px;
height: 20px;
line-height: 20px;
border: 1px solid #d0d0d0;
background: #f0f0f0;
z-index: 1;
}
ul.pagination li a{
display: block;
width: 16px;
height: 20px;
line-height: 20px;
border: 1px solid #d0d0d0;
border-right: 1px solid transparent;
background: #f0f0f0;
z-index: 1;
}
ul.pagination li a:hover{
position: absolute;
top: -1px;
left: -2px;
width: 20px;
height: 22px;
line-height: 22px;
z-index: 2 !important;
}
ul.pagination .last{
border-right: 1px solid #d0d0d0;
} |
Le z-index du a:hover ne prime pas sur le z-index du a ou span suivant.
Auriez-vous une idée, de comment forcer ceci ?
Merci d'avance.
