pseudo classe "active" qui ne fonctionne pas

**crozet.magenta** · 26/06/2013, 21h39

Bonjour,
Je fais des tests pour faire des boutons "animés" en CSS3. j'ai fait un état au repos, un état au survol et un état au clic.
le :hover fonctionne bien mais le :active ne s'active justement pas

j'ai testé sous chrome et firefox (à jour les deux)
voici mon html :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
  <link rel="stylesheet" type="text/css" href="boutons.css">
  <title>test boutons</title>
</head>
<body>
  <div class="button small"></div>
  <div class="button classic"></div>
  <div class="button big"></div>
</body>
</html>

et le CSS :

Code CSS :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.button{ 
  background:url("boutons.png") top left no-repeat;
}
.small:active
{ 
  width:102px;
  height:38px;
  background-position:-10px -10px;
}
.classic:active
{ 
  width:152px;
  height:38px;
  background-position:-10px -58px;
}
.big:active
{ 
  width:202px;
  height:38px;
  background-position:-10px -106px;
}
.small:hover
{ 
  width:102px;
  height:38px;
  background-position:-10px -154px;
}
.classic:hover
{ 
  width:152px;
  height:38px;
  background-position:-10px -202px;
}
.big:hover
{ 
  width:202px;
  height:38px;
  background-position:-10px -250px;
}
.small
{
  width:102px;
  height:38px;
  background-position:-10px -298px;
}
.classic
{
  width:152px;
  height:38px;
  background-position:-10px -346px;
}
.big
{ 
  width:202px;
  height:38px;
  background-position:-10px -394px;
}

Merci d'avance pour votre aide

**Candygirl** · 26/06/2013, 22h21

Bonsoir,

Le pseudo-classe:active doit être spécifiée après le :hover dans ton css puisque ces 2 sélecteurs ont la même spécificité. Si le :hover est placé après, il prend le dessus sur le :active puisqu'on fait forcément un :hover au moment où l'on clique.

**crozet.magenta** · 26/06/2013, 22h39

ah ok merci

pseudo classe "active" qui ne fonctionne pas

CSS

Vue hybride

Discussions similaires

Partager

Partager