[CSS] hover subclass werkt niet in IE

[MadEgg]

Ik ben een webpagina aan het bouwen met daarin een <div> element met de id 'blaat'.

Nu heb ik in mijn stylesheet staan:

code:

#blaat {background-color: #ff0000;}
#blaat:hover {background-color: #0000ff;}

De bedoeling moge duidelijk zijn; als je met de muis over dit div element heengaat moet de achtergrondkleur van rood in blauw veranderen.
Dit systeem werkt prima in mozilla 1.3, mozilla firebird 0.6.1 en lateren vast ook wel, en ook in Opera 7.21 en Konqueror van KDE 1.4.1 op Linux.
Internet Explorer 5 en 6 vinden het echter maar niks en houden stug het div element rood.

Nou heb ik datzelfde wel voor elkaar gekregen met de onMouseOver en onMouseOut tags van het div element, die vervolgens een javascriptje aanroepen wat de background property van het betreffende element aanpast; dit werkt.

De bovenste methode is echter veel en veel simpeler te implementeren en vind ik ook veel netter.

Heb ik nu iets fout in de code waardoor het ff niet werkt in IE, is dit een fout van IE of iets wat nog niet is ingebouwd of hebben Opera/Mozilla/Konqueror dit toegevoegd en is de bovenste methode gewoon fout?

[creative8500]

IE-hover werkt volgens mij alleen bij anchor-elementen. Mogelijk is het volgende een oplossing, maar ik heb het niet getest.

CSS:

code:

#blaat { behavior: url(div-hover.htc); }

div-hover.htc

code:

<attach event="onmouseover" handler="blue" />
<attach event="onmouseout" handler="red" />
<script type="text/javascript">
function blue() { element.style.backgroundColor = "Blue"; }
function red() { element.style.backgroundColor = "Red"; }
</script>

[ Voor 105% gewijzigd door creative8500 op 08-11-2003 16:26 ]

[MadEgg]

Het jammere daarvan is dat het dus(net als mijn methode) gebruik maakt van Javascript wat ik eigenlijk wilde voorkomen. Dat gaat dus helaas niet lukken.
In ieder geval bedankt voor de code, dat maakt het wel een stuk netter, ga even proberen of het werkt.

Maar wat is nu het correcte gedrag volgens de standaard; dat van Mozilla neem ik aan?

edit:

Net even geprobeerd. Die code werkt WEL in Internet Explorer maar helaas weer niet in Mozilla, Konqueror of Opera. Het blijft dus een kwestie van 2 methodes in de pagina stoppen

[ Voor 23% gewijzigd door MadEgg op 08-11-2003 16:48 ]

[chris]

als je ff goed zoekt kom je bij w3c terecht, en daar staan de officiele specs.

[MadEgg]

Bij die methode met dat div-hover.htc bestand werkt de mouseover alleen als je over de tekst gaat in de <div>, niet over de lege ruimte erin

Ook niet echt een oplossing dus helaas

[creative8500]

Mozilla zit goed; Internet Explorer ondersteunt de hover-pseudo-selector onvolledig.
Over het probleem met de tekst: wellicht kun je dan beter in plaats van de onmouseout-handler een onmouseover-handler voor het bovenliggende element instellen.

[ Voor 52% gewijzigd door creative8500 op 08-11-2003 17:55 ]

[Johnny]

code:

a:link.blaat,
a:hover.blaat,
a:active.blaat,
a:visited.blaat {
display: block;
}

a:hover.blaat {
wat ie moet doen bij een hover
}

Op deze manier laat je een <a> tag als een <div> gedragen.

[ Voor 7% gewijzigd door Johnny op 08-11-2003 20:52 ]