Avatar billede natsprinter Nybegynder
05. marts 2007 - 16:15 Der er 6 kommentarer og
1 løsning

hover på andre elementer end <a> markøren

Hvis du kikker på www.dan-time.dk kan du se den side jeg arbejder på lige nu. Menuen er ren CSS, som bruges til at formatere en liste der ser således ud:

<ul id="nav">
<li><a href="index.asp?side=1"><span class="topMenu">Forside</span></a>
<li><a href="#">Produkter</a>
    <ul>
        <li><a href="#">Stempelure</a>
            <ul>
                <li><a href="mekanisk.asp?side=7">Mekaniske</a></li>
                <li><a href="elektronisk.asp?side=8">Elektroniske</a></li>
                <li><a href="pc_baseret.asp?side=9">PC Baseret</a></li>
            </ul>
        </li>
       
        <li><a href="#">PC programmer</a>
            <ul>
                <li><a href="danTimer.asp?side=10">Dan Timer</a></li>
                <li><a href="danPlan.asp?side=11">Dan-Plan</a></li>
                <li><a href="danTimerSql.asp?side=12">Dan-Timer SQL</a></li>
            </ul>
       
        </li>
    </ul>
</li>

<li><a href="profil.asp?side=2">Profil</a></li>

<li><a href="salg.asp?side=3">Salg</a></li>

<li><a href="referencer.asp?side=4">Referencer</a></li>

<li><a href="support.asp?side=5">Support</a></li>

<li><a href="#">Information</a>
    <ul>
        <li><a href="kontakt.asp?side=6">Kontakt</a></li>
        <li><a href="job.asp?side=13">Ledige job</a></li>
        <li><a href="brochure.asp?side=14">Brochure</a></li>
        <li><a href="faq.asp?side=15">FAQ</a></li>
    </ul>
</li>

</ul>

Det virker fin i ALLE nyere browsere på nær IE6. Når jeg ser det i lige præcis den browser er der ikke en menu, men en liste.

Hvordan søren får jeg styr på den del. Jeg har prøvet at bruge denne javascript kode, som angiveligt skulle fikse problemet med hover på andre elementer end <a> markøren:

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Håber der er én der har en god idé til mig ??
Avatar billede simplus Nybegynder
05. marts 2007 - 16:23 #1
Du behøver slet ikke at gøre det så svært for dig selv.. Lad os antage at du har to class'. En der definere farverne for det "normale" element og en der definere farverne når elementet er sat til hover.

Vi kalder de to class' for punkt1 og punkt2 så kan du gøre således

punkt1 {
  blabla: bla;
}
punkt2:hover {
  blabla: bla;
}
Avatar billede simplus Nybegynder
05. marts 2007 - 16:24 #2
nej da, lille fejl fra min side. De to class' skal selvfølgelig hedde det samme, så det bliver

punkt1 {
  blabla: bla;
}
punkt1:hover {
  blabla: bla;
}

tsk :-)
Avatar billede natsprinter Nybegynder
05. marts 2007 - 17:24 #3
Problemet er bare at det forstår IE6 ikke

denne kode læses af alle moderne browsere:
#nav li li:hover ul

Men i IE6 er det ikke muligt at sætte hover fast på <li> markøren. Derfor er det nødvendigt med noget "hjælp"

Jann
Avatar billede jhe-ting Nybegynder
08. marts 2007 - 20:02 #4
Du kan prøve med hover.htc fra microsoft
Avatar billede jhe-ting Nybegynder
08. marts 2007 - 20:14 #5
Hov - der var ikke hos MS jeg så det ...

Det var hos PeterNed:

    http://www.xs4all.nl/~peterned/csshover.html
Avatar billede natsprinter Nybegynder
09. marts 2007 - 08:59 #6
Hej jhe-ting (hvad end det står for) - Vil du ikke smide et svar, for dit link gav løsningen på mit problem - tak for det.
Avatar billede jhe-ting Nybegynder
14. marts 2007 - 17:30 #7
Helt fint.
(Mine initialer er jhe og jeg bor i tingbjerg)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester