Sjaak Priester

Maak Internet Explorer hovergevoelig

‘Hoveren’ werkt in Microsoft Internet Explorer alleen boven een link. Andere browsers doen het beter. Een truc houdt ook IE bij de les.

De CSS ‘pseudoclass’ :hover is een uitvinding van Microsoft. Inmiddels is hij onderdeel geworden van de algemeen geaccepteerde standaard voor Cascading Style Sheets (CSS). Des te vreemder is dat het nu juist de browser van Microsoft is, waarbij :hover alleen werkt boven een link.

Als je in deze website (en praktisch alle andere websites) de muis boven een link beweegt, verandert die van kleur. Dat komt door CSS stijlregels zoals de volgende:

a {
  color: darkgoldenrod }
a:hover {
  color: firebrick }

Hierin is :hover een CSS ‘pseudoclass’ die als het ware de eigenschappen van <a> aanpast als er met de muis overheen wordt gegaan.

Leuke uitvinding

Zelfs de grootste vijanden van Microsoft vonden :hover een leuke uitvinding. Vandaar dat veel andere browsers (Mozilla, Netscape, Opera) hem ook ondersteunen. Sterker nog, ze doen dat eigenlijk beter dan MS Internet Explorer. Terwijl de laatstgenoemde :hover alleen ondersteunt voor elementen met de tag <a>, doen de andere het voor alle elementen. Wat dat betreft houden ze zich aan de CSS2-standaard.

In Internet Explorer werkt het niet. En dat is jammer, want

:hover

voor andere elementen dan <a> komen goed te pas voor navigatiemenu’s en dergelijke.

Hoop

Maar er is hoop. Bij de vele eigenaardigheden van Internet Explorer horen ook behaviors. Dat zijn kleine stukjes ingekapselde Javascript code, die met stijlregels gekoppeld kunnen worden aan elementen. Voor zover ik weet is IE de enige browser die heeft gehoord van behaviors, wat normaal gesproken een goede reden zou zijn om ze te mijden. Maar ze komen goed van pas om de gebrekkige ondersteuning op andere gebieden te compenseren. Van :hover, bijvoorbeeld.

De eigenschap

behavior

is specifiek voor IE. Andere browsers reageren er (gelukkig) niet op. In het bestand(je) "hover.htc" heb ik het ‘gedrag’ in een klein stukje Javascript vastgelegd. Dat komt neer op:

1. Als de muis boven het element komt (onmouseover), krijgt het element de class "hover" toegekend;
2. Als de muis het element weer verlaat (onmouseout), wordt die toekenning weer ongedaan gemaakt.

In plaats van de pseudoclass :hover krijgt het element onder IE dus een gewone class "hover" toegekend zolang de muis erboven zweeft.

De tweede stijlregel maakt daarvan gebruik. Die omschrijft hoe het element er moet uitzien, zowel met de pseudoclass als met de gewone class. Let op het gebruik van dubbele en enkele punt.

Wat zit er in?

Wat er in het bestand "hover.htc" zit, is werkelijk ontroerend eenvoudig. Dit is de hele inhoud:

<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Unhover()" />
<SCRIPT LANGUAGE="JScript">
  function Hover()
  {
    element.className += " hover";
  }

  function Unhover()
  {
    element.className = element.className.replace(/\s*hover/, "");
  }
</SCRIPT>
</PUBLIC:COMPONENT>

Het zijn twee Javascript functies van elk één statement met wat XML-achtige glue eromheen. Op Microsoft’s MSDN-netwerk is meer te vinden over behavior en HTC (HTML Components).

Volgens mij werkt het in IE 5.0 en later (althans in de Windows-versies). Mijn versie is simpel, en kent zijn beperkingen, maar is voor mij goed genoeg. Anderen hebben varianten van dit idee bedacht die veel slimmer zijn.

Belangrijk is dat de behavior-eigenschap zijn htc-bestand relatief ten opzichte van de HTML-pagina zoekt, en niet ten opzichte van het CSS-bestand. Dit in tegenstelling tot bijvoorbeeld de background-image eigenschap. Volgens mij is dat eigenlijk incorrect. In de praktijk komt het erop neer dat "hover.htc" in dezelfde map moet staan als de HTML-pagina.

Ik gebruik "hover.htc" voor mijn slimme louter-CSS-webmenu en mijn even slimme fotoshow.

Wie ook emplooi heeft voor "hover.htc" kan het aantreffen in het volgende ultrakleine zip-bestandje.

Download hover