Avatar billede jesper-moeller Nybegynder
09. november 2006 - 14:11 Der er 5 kommentarer og
1 løsning

vis lag ved hover i IE

Hvordan får jeg IE til at vise et layer ved hover på et link ??

Følgende virke undtagen i IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>tester</title>
        <style type="text/css" media="screen"><!--
#lag { z-index: 10; }
#tool { position: relative; width: 19px; height: 18px; z-index: 200; border: solid 1px orange; }
#toolexp { background-color: silver; position: absolute; width: 100px; height: 100px; z-index: 100; visibility: hidden; border: solid 1px green; }

#tool:hover div { visibility: visible; }


--></style>
    </head>

    <body>
        <div id="tool">
            <a href="#" class="tools"><img src="images/folder_new.gif" alt="" width="19" height="18" border="0" /></a>
            <div id="toolexp">
                tekst<br />
                tekst<br />
                tekst<br />
            </div>
        </div>
    </body>

</html>

Se evnt http://www.mylon.dk/blank.html
Avatar billede notes2c Nybegynder
09. november 2006 - 17:55 #1
IE ihvertifald op til version 6 understøtter :hover på andre element en a tag. Så derfor er du nødt til at bruger lidt java script:

Eks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>tester</title>
        <style type="text/css" media="screen"><!--
#lag { z-index: 10; }
#tool { position: relative; width: 19px; height: 18px; z-index: 200; border: solid 1px orange; }
#toolexp { background-color: silver; position: absolute; width: 100px; height: 100px; z-index: 100; visibility: hidden; border: solid 1px green; }

#tool:hover div { visibility: visible; }

--></style>
    </head>

    <body>
        <div id="tool">
            <a href="#" class="tools" onmouseover="document.getElementById('toolexp').style.visibility='visible';" onmouseout="document.getElementById('toolexp').style.visibility='hidden';"><img src="images/folder_new.gif" alt="" width="19" height="18" border="0" /></a>
            <div id="toolexp">
                tekst<br />
                tekst<br />
                tekst<br />
            </div>
        </div>
    </body>

</html>
Avatar billede jesper-moeller Nybegynder
09. november 2006 - 20:19 #2
Det kan ikke gøres uden javascript ???
Avatar billede notes2c Nybegynder
09. november 2006 - 20:30 #3
Nej ikke hvis det skal virker i IE
Avatar billede notes2c Nybegynder
09. november 2006 - 20:32 #4
Måske virker det i IE7, men jeg ved det ikke. Har den ikke installeret...
Avatar billede roenving Novice
12. november 2006 - 04:33 #5
IE7 understøtter en del af css 2 (og 3 !-), men stadig ikke alt grundlæggende css1.0 !o]
Avatar billede notes2c Nybegynder
12. november 2006 - 09:37 #6
Fik langt om længe installeret og det ser ud til at :hover virker på alle elementer. Så det gør jo tingene lidt nemmere. Kan vel også sige det var på tide...
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