CSS a:hover werkt niet?
ik wil ook graag zo'n mooi effectje als je met je muis over een menu-item gaat(wie wil dat nou niet), maar het wil maar niet lukken.
ik heb even snel een andere menu button gemaakt om te kijken of het lukt, maar ik krijg in IE en FF geen enkel effect.
ik heb nu de volgende regel toegevoegd:
a:hover {
background-position: -50px;
font: underline 13px/18px Tahoma;
color : #12B813;
}
maar het werkt niet..
voor de site: www.slepperfm.nl/test
p.s. die font en color zijn niet voor m'n menu, maar ik weet niet of dit wat uitmaakt??
en daarin gewoon een andere afbeelding met het opschift in een andere kleur
http://www.jankoehoorn.nl/css_menu.php
In dit voorbeeld zie je een pure cross browser CSS oplossing voor een menu met hover effecten.
bijv. door ze allemaal een apart id te geven ofzo?
Code (php)
1
2
3
2
3
div.buttons:hover {
background-image: url(/foo/bar.gif);
}
background-image: url(/foo/bar.gif);
}
Werkt alleen niet in IE6, maar wat werkt daar wel in.
Gewijzigd op 01/01/1970 01:00:00 door Martijn B
Code (php)
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
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
<script type="text/javascript">
if(document.images)
{
afbeelding01Uit = new Image();
afbeelding01Uit.src = "afbeelding1.gif";
afbeelding01Aan = new Image();
afbeelding01Aan.src = "afbeelding1.gif";
afbeelding02Uit = new Image();
afbeelding02Uit.src = "afbeelding2.gif";
afbeelding02Aan = new Image();
afbeelding02Aan.src = "afbeelding2.gif";
afbeelding03Uit = new Image();
afbeelding03Uit.src = "afbeelding3.gif";
afbeelding03Aan = new Image();
afbeelding03Aan.src = "afbeelding3.gif";
afbeelding04Uit = new Image();
afbeelding04Uit.src = "afbeelding4.gif";
afbeelding04Aan = new Image();
afbeelding04Aan.src = "afbeelding4.gif";
}
function afbeeldingAan(Naam)
{
if(document.images)
{
tekstAanNaam = eval(Naam + "Aan.src");
document.images[Naam].src = tekstAanNaam;
}
}
function afbeeldingUit(Naam)
{
if(document.images)
{
tekstUitNaam = eval(Naam + "Uit.src");
document.images[Naam].src = tekstUitNaam;
}
}
</script>
if(document.images)
{
afbeelding01Uit = new Image();
afbeelding01Uit.src = "afbeelding1.gif";
afbeelding01Aan = new Image();
afbeelding01Aan.src = "afbeelding1.gif";
afbeelding02Uit = new Image();
afbeelding02Uit.src = "afbeelding2.gif";
afbeelding02Aan = new Image();
afbeelding02Aan.src = "afbeelding2.gif";
afbeelding03Uit = new Image();
afbeelding03Uit.src = "afbeelding3.gif";
afbeelding03Aan = new Image();
afbeelding03Aan.src = "afbeelding3.gif";
afbeelding04Uit = new Image();
afbeelding04Uit.src = "afbeelding4.gif";
afbeelding04Aan = new Image();
afbeelding04Aan.src = "afbeelding4.gif";
}
function afbeeldingAan(Naam)
{
if(document.images)
{
tekstAanNaam = eval(Naam + "Aan.src");
document.images[Naam].src = tekstAanNaam;
}
}
function afbeeldingUit(Naam)
{
if(document.images)
{
tekstUitNaam = eval(Naam + "Uit.src");
document.images[Naam].src = tekstUitNaam;
}
}
</script>
Op de volgende manier gebruiken, werkt hier bij mij perfect.
Code (php)
1
2
3
2
3
<a href="" onMouseover="afbeeldingAan('afbeelding01')" onMouseout="afbeeldingUit('afbeelding01')">
<img class="menu" src="De link van het plaatje dat je standaardt moet zien" name="afbeelding01" alt="afbeelding1">
</a>
<img class="menu" src="De link van het plaatje dat je standaardt moet zien" name="afbeelding01" alt="afbeelding1">
</a>