Avatar billede vante Nybegynder
23. marts 2009 - 22:57 Der er 9 kommentarer

Hjælp til mouseover(:hover) effekt

Jeg har et problem med CSS der er ved at gøre mig sindsyg. Mouseover(:hover) effekten på siden herunder kan jeg kun få det til at virke i alle andre browser end IE er der nogen der kan fortælle mig, hvad det er jeg gør forkert. Jeg har snart brugt en uge på det og kan simplethen ikke se hvad jeg gør forkert. Jeg håber der er nogle kloge hoveder herinde der kan hjælpe mig.

Håber I kan tyde det, jeg har indsat herunder.

<HTML>
<head>
    <title>
    Welcome to Myfurniture
    </title>
<style type="text/css">

#menu {
  width: 170px;
  height: 60px;
  background: url('page_img/menu_knap_on.gif') no-repeat;
  border: 0px solid black;
  cursor:pointer;
}

#menu:hover {
    width: 170px;
  height: 60px;
    background:url('page_img/menu_knap_off.gif') no-repeat;
    border: 0px solid black;
  cursor:pointer;
}

p.transbox {
  margin: 15px auto auto 70px;
  font-weight: bold;
  text-align: left;
  border: 0px solid black;
  color: #000000;
}
 
</style>

</head>
<body>
<center>
<table border="0" width="925px" height="601px">
    <tr>
            <td colspan="2" align="left"><a href="index.php"><img border="0" src="page_img/topbar.gif"></a></td>
        </tr>
        <tr>
            <td width="100px" height="100%" valign="top" >
                <table border="0" width="100%"">
                               
                        <tr>
                            <td align="center" id="menu"><a target="right_side" href="katalog.php?var=1"><p class="transbox">Chairs</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center" id="menu"><a target="right_side" href="katalog.php?var=2"><p class="transbox">Tables</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center" id="menu"><a target="right_side" href="katalog.php?var=11"><p class="transbox">Outlet</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center" id="menu"><a target="right_side" href="katalog.php?var=4"><p class="transbox">Ceramics</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center" id="menu"><a target="right_side" href="katalog.php?var=7"><p class="transbox">Diverse</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center" id="menu"><a target="right_side" href="katalog.php?var=10"><p class="transbox">Art</p></a></td>
                        </tr>
                                    <tr>
                    <td align="center" id="menu"><a target="right_side" href="user_sog.php"><p class="transbox">Search</p></a></td>
                </tr>
                </table>
            </td>
            <td width="825px" height="100%"><iframe name="right_side" src ="user_main.php" width="100%" height="100%" scrolling="auto" frameBorder="0"></iframe>
                               
            </td>
        </tr>
</table>
</center>


</body>
</HTML>


PFT
Vante
Avatar billede Slawomir Seniormester
23. marts 2009 - 23:06 #1
Avatar billede OskarRough Nybegynder
23. marts 2009 - 23:33 #2
Internet Explorer understøtter som standard ikke :hover på noget som helst udover a tags.

Du kan omgå det på to måder. Enten ændre din kode - givet det giver mening, også semantisk - til at udnytte a-tags. Ellers kan du bruge et JavaScript, som sikrer understøttelse i IE.

Måske denne her: http://www.xs4all.nl/~peterned/csshover.html - kunne ikke lige finde den helt rigtige, men prøv det!
Avatar billede vante Nybegynder
23. marts 2009 - 23:50 #3
Okay, jeg har også prøvet at gøre det med a:hover, men så virker det som om at det kun er IE der vil og ikke alle de andre, kan det passe eller gør jeg i såfald noget forkert, kan lige smide et eksempel om et par min, hvis det er?
Avatar billede olebole Juniormester
24. marts 2009 - 10:29 #4
<ole>

IE understøtter hover på alle elementer, men først fra version 7.0.

Om man så overhovedet bør bruge den, er en anden ting. I moderne webkode skelnes mellem:
    Opmærkning (HTML)
    Visuel præsentation (CSS)
    Funktionalitet (Script)

Rigtig meget af det, hover idag anvendes til, burde slet ikke varetages af CSS, men af script - hvorfor emnet også har givet anledning til megen debat i W3C.
Hover fik dog af historiske grunde lov til at forblive i CSS - og resultatet er som forventet blevet at den misbruges til alt muligt  =)

/mvh
</bole>
Avatar billede vante Nybegynder
24. marts 2009 - 10:52 #5
Hmm, jeg forstår godt din indeling og jeg er som udvikler SUPER MEGA træt af kodeelementer der ikke er standard! Så kom det lige ud. Nå men sådan er det og nu må jeg forholde mig til det.

1. Jeg kører IE 8 og der virker det ikke.
2. Forslår du så at jeg istedet skal lave det i JavaScript?

Mvh
Vante
Avatar billede OskarRough Nybegynder
24. marts 2009 - 11:25 #6
Ole, man kan da fint argumentere, at hover bruges til visuelt at præsentere et eller andet? Modsat at placere det under script/funktionalitet. Eller er jeg gal på den ?-)

Vante, gider du uploade et eksempel? Men du kan i hvertfald starte med at udskifte dine id="menu" med class="menu", såfremt det skal bruges flere steder.
Avatar billede vante Nybegynder
24. marts 2009 - 11:37 #7
Ja jeg skal nok lige lave et eksempel hvor jeg bruger a:hover istedet..
Avatar billede vante Nybegynder
24. marts 2009 - 11:46 #8
Her er det samme eksempel som før bare med a:hover istedet. Ganske rigtigt, nu virker det i IE, men ikke i Firefox og Safari. Jeg synes også selv det virker lidt meget at begynde at vikle JavaScript ind i det, men hvis det er det der skal til så gør jeg det..

<HTML>
<head>
    <title>
    Welcome to Myfurniture
    </title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">

a.menu {
  width: 170px;
  height: 60px;
  background: url('page_img/menu_knap_on.gif') no-repeat;
  border: 0px solid black;
  cursor:pointer;
}

a.menu:hover {
    width: 170px;
  height: 60px;
    background:url('page_img/menu_knap_off.gif') no-repeat;
    border: 0px solid black;
  cursor:pointer;
}

p.transbox {
  margin: 15px auto auto 70px;
  font-weight: bold;
  text-align: left;
  border: 0px solid black;
  color: #000000;
}
 
</style>

</head>
<body>
<center>
<table border="0" width="925px" height="601px">
    <tr>
            <td colspan="2" align="left"><a href="index.php"><img border="0" src="page_img/topbar.gif"></a></td>
        </tr>
        <tr>
            <td width="100px" height="100%" valign="top" >
                <table border="0" width="100%"">
                               
                        <tr>
                            <td align="center"><a target="right_side" class="menu" href="katalog.php?var=1"><p class="transbox">Chairs</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center"><a target="right_side" class="menu" href="katalog.php?var=2"><p class="transbox">Tables</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center"><a target="right_side" class="menu" href="katalog.php?var=11"><p class="transbox">Outlet</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center"><a target="right_side" class="menu" href="katalog.php?var=4"><p class="transbox">Ceramics</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center"><a target="right_side" class="menu" href="katalog.php?var=7"><p class="transbox">Diverse</p></a></td>
                        </tr>
                               
                        <tr>
                            <td align="center"><a target="right_side" class="menu" href="katalog.php?var=10"><p class="transbox">Art</p></a></td>
                        </tr>
                                    <tr>
                    <td align="center"><a target="right_side" class="menu" href="user_sog.php"><p class="transbox">Search</p></a></td>
                </tr>
                </table>
            </td>
            <td width="825px" height="100%"><iframe name="right_side" src ="user_main.php" width="100%" height="100%" scrolling="auto" frameBorder="0"></iframe>
                               
            </td>
        </tr>
</table>
</center>


</body>
</HTML>

Pft Vante
Avatar billede olebole Juniormester
24. marts 2009 - 15:22 #9
"jeg er som udvikler SUPER MEGA træt af kodeelementer der ikke er standard!" >> Skal vi nu ikke lige få armene ind til kroppen og tage et kik i det realistiske spejl?  ;o)

center-tags har om ganske kort været deprecated i 10 år! Desuden har (i)frames og target ikke været del af HTML siden version 3.2. Kun i overgangsversioner som HTML4.01 Transitional, der i følge W3C burde have været udfaset senest i begyndelsen af dette årtusinde.

Et table element har aldrig haft en height attribut.

Enheder (bortset fra '%') har aldrig været valide (eller brugbare) i HTML-attributter.

Et a-element kan naturligvis aldrig indeholde et p-element. Blæser man på det, vil al visning i dét område af siden være fuldstændig tilfældig.

Undskyld min garanteret upopulære holdning, men for mig at se er det største problem omkring webkode absolut ikke browsernes manglende overholdelse af standarderne (som forøvrigt ofte er dramatisk overvurderet).
Det uden sammenligning allerstørste problem er alle de tusinder af inkompetente 'kodere', som i egen selvforståelse er 'webudviklere' - men som i virkeligheden ikke ved det mest elementære om webkode!
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

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