Salut,
J'ai cédé au téléchargement d'un code tout fait pour avoir un léger effet sur des liens.
Ca fonctionne bien mais je cherche à changer la couleur du lien actif. Mais je dois avoir une info contraire dans ce code puisque ça ne marche pas.
Pourquoi ça, ça ne le fait pas ?
Voilà le reste du code:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 nav a:hover, nav a:focus{ outline: none; color: #fff; }
Merci.
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
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106 *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Raleway', sans-serif; } nav a { position: relative; display: inline-block; margin: 15px 15px; outline: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 15px; text-decoration: none; } nav a:hover, nav a:focus{ outline: none; color: #fff; } /* Effect 14: border switch */ .cl-effect-14 a { padding: 0 5px; height: 45px; line-height: 45px; color: #333; } .cl-effect-14 a::before, .cl-effect-14 a::after { position: absolute; width: 45px; height: 2px; background: #fff; content: ''; opacity: 0.2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; pointer-events: none; } .cl-effect-14 a::before { top: 0; left: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } .cl-effect-14 a::after { right: 0; bottom: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; transform-origin: 100% 0; } .cl-effect-14 a:hover::before, .cl-effect-14 a:hover::after, .cl-effect-14 a:focus::before, .cl-effect-14 a:focus::after { opacity: 1; } .cl-effect-14 a:hover::before, .cl-effect-14 a:focus::before { left: 50%; -webkit-transform: rotate(0deg) translateX(-50%); -moz-transform: rotate(0deg) translateX(-50%); transform: rotate(0deg) translateX(-50%); } .cl-effect-14 a:hover::after, .cl-effect-14 a:focus::after { right: 50%; -webkit-transform: rotate(0deg) translateX(50%); -moz-transform: rotate(0deg) translateX(50%); transform: rotate(0deg) translateX(50%); }
Partager