CSS a:hover werkt niet?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Erwin Nieuwenhuis

Erwin Nieuwenhuis

13/03/2008 17:44:00
Quote Anchor link
hallo,

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??
 
PHP hulp

PHP hulp

28/03/2024 18:55:14
 
Henk PHP

Henk PHP

13/03/2008 17:46:00
Quote Anchor link
Dit werkt natuurlijk niet omdat je buttons plaatjes zijn en geen tekst.
 
Erwin Nieuwenhuis

Erwin Nieuwenhuis

13/03/2008 19:00:00
Quote Anchor link
en wat moet ik dan doen om het te laten werken?
 
Pieter Boussaer

Pieter Boussaer

13/03/2008 19:25:00
Quote Anchor link
Bij de img tag moet je onmouseover zetten

en daarin gewoon een andere afbeelding met het opschift in een andere kleur
 
Joren de Wit

Joren de Wit

13/03/2008 19:28:00
Quote Anchor link
@Pieter: dat is een javascript oplossing en dus geen CSS. In principe zou je de :hover pseudo klasse ook op de <img> tag kunnen gebruiken, ware het niet dat dit niet zal werken in oudere versies van IE.

http://www.jankoehoorn.nl/css_menu.php

In dit voorbeeld zie je een pure cross browser CSS oplossing voor een menu met hover effecten.
 
Erwin Nieuwenhuis

Erwin Nieuwenhuis

13/03/2008 19:30:00
Quote Anchor link
kan ik daarbij ook gebruik maken van afbeeldingen ipv tekst?

bijv. door ze allemaal een apart id te geven ofzo?
 
Martijn B

Martijn B

13/03/2008 19:31:00
Quote Anchor link
Je zou van de buttens divjes kunnen maken en dit doen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
div.buttons:hover {
  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
 
Henk PHP

Henk PHP

13/03/2008 19:46:00
 
Erik Rijk

Erik Rijk

13/03/2008 19:48:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>


Op de volgende manier gebruiken, werkt hier bij mij perfect.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Henk PHP

Henk PHP

13/03/2008 19:49:00
Quote Anchor link
Javascript kan natuurlijk ook, maar dat kun je uitzetten.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.