Css: Hover med background image, virker i FF men ikke IE

Min menu ser således ud:

<div onmouseover="style.cursor='hand';" onclick="location.href='?mode=forside'">
<div class="menupunkt"><div class="menupunkt_center">Forside</div></div>
</div>
<div onmouseover="style.cursor='hand';" onclick="location.href='?mode=about'">
<div class="menupunkt"><div class="menupunkt_center">Om Livretten</div></div>
</div>
<div onmouseover="style.cursor='hand'; style.background-image='url(hl.jpg)';" onclick="location.href='?mode=menukort'">
<div class="menupunkt"><div class="menupunkt_center">Menukort</div></div>
</div>
<div onmouseover="style.cursor='hand';" onclick="location.href='?mode=selskab'">
<div class="menupunkt"><div class="menupunkt_center">Selskabsmenu</div></div>
</div>
<div onmouseover="style.cursor='hand';" onclick="location.href='?mode=smorrebrod'">
<div class="menupunkt"><div class="menupunkt_center">Smørrebrød</div></div>
</div>
<div onmouseover="style.cursor='hand';" onclick="location.href='?mode=madordning'">
<div class="menupunkt"><div class="menupunkt_center">Madordning</div></div>
</div>
<div onmouseover="style.cursor='hand';" onclick="location.href='?mode=online'">
<div class="menupunkt"><div class="menupunkt_center">Onlinebestilling</div></div>
</div>
<div onmouseover="style.cursor='hand';" onclick="location.href='?mode=job'">
<div class="menupunkt"><div class="menupunkt_center">Job i livretten</div></div>
</div>

meget simplet, du kan ikke lave hover på andet end <a> elementer i IE.

Hmm - det var jeg da lidt træt af faktisk... har du nogle ideer til hvordan jeg så kan løse det, uden brug af javascript?

Jeg forsøger mig med:

<div onmouseover="style.cursor='hand'; style.backgroundImage='url(hl.jpg)';" onclick="location.href='?mode=menukort'">
<div class="menupunkt"><div class="menupunkt_center">Menukort</div></div>
</div>

Men det vil heller ikke rigtigt spille. - den fjerner bare baggrundsbilledet i et kort  øjeblik.

Og løsningen var jo simpel:

<div onclick="location.href='?mode=menukort'">
<div class="menupunkt"><a href="#"><div class="menupunkt_center">Menukort</div></a></div>
</div>

med dette css:

.menupunkt {
    float: left;
    margin: 0px;
    width: 95px;
    height: 27px;
    display: block;
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    border: 0px solid black;
    text-align: center;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.menupunkt a:hover {
    float: left;
    margin: 0px;
    width: 95px;
    height: 27px;
    display: block;
    background-image: url(hl.jpg);
    background-repeat: no-repeat;
    border: 0px solid black;
    text-align: center;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

smid svar tdafoobar

tip:

<a href="java script:void(0)"> , så får du ikke en irreterende # efter dine url's hvis du trykker :-)

<ole>

Noget kønnere end unødigt at bruge et tomt JS-kald via JavaScript pseudo-protokollen er blot at returnere false i onclick-handler'en. Så er det bedøvende, hvad der står i href'en ... der når vi aldrig til:

    <a href="#" onclick="alert('Sådan ...');return false" ....>

/mvh
</bole>

Kan det passe at der stadig i mit link vil være # når jeg har mouseover? - men at den bare ikke følger med i adressebaren.?

Jeg bruger ole's løsning :D

Takker for hjælpen til lige at få omstruktureret lidt :D

I virkeligheden kan du skrive, hvad som helst. Jeg har bare skrevet et hash-mark for at være sikker på, jeg overholder HTML4.01  :)

onclick-event'en fyres af lige før linket's default-handling (sideskift) afvikles. Returnerer du falsk i handler'en, forhindres default-handlingen  ;o)

Det lyder godt :) - endnu engang fik man lært lidt hehe... Btw olebole, jeg læste i en eller anden tråd, at du havde gang i din egen hjemmeside med "tips og tricks" og dine egne artikler. Hvor langt er du med det? :D