Avatar billede Slettet bruger
22. juni 2009 - 17:45 Der er 9 kommentarer og
1 løsning

block ved hover

hej.

jeg så i en anden tråd en løsning på hvordan man kan gøre så der kommer en boks over ens links når musen kører over.

men da min menu også kører på <a> bliver menuen underlig.

min links skulle gerne have den ssamme effekt som ham her har på sine:

http://www.jayj.dk/
Avatar billede eydun Nybegynder
22. juni 2009 - 18:49 #1
F.eks.:

a { text-decoration: none; }
a:hover { background: #cc5630; color: #fff; }
Avatar billede Slettet bruger
22. juni 2009 - 18:50 #2
ja men det ødelægger mine menu links :S
Avatar billede eydun Nybegynder
22. juni 2009 - 18:59 #3
hvordan det?
Avatar billede eydun Nybegynder
22. juni 2009 - 19:06 #4
Ah, jeg tror jeg forstår...

Hvad med at give menuen en class, som overrider default?

a { text-decoration: none; }
a:hover { background: #cc5630; color: #fff; }

og så et eller andet med

a.menu { }
a.menu:hover { }

eller

div.menu a {}
div.menu a:hover {}

Muligvis skal text-decoration, background o.s.v. sættes til et eller andet for at de overrider defaultværdierne.
Avatar billede Slettet bruger
22. juni 2009 - 19:23 #5
tror ikke jeg forstår?
Avatar billede eydun Nybegynder
22. juni 2009 - 23:02 #6
Har du noget css der styrer din menu?
Avatar billede Slettet bruger
23. juni 2009 - 10:33 #7
ja det her styrer min menu:

#menu{
    padding: 25px 15px 0 650px; /*flytter menuen rundt på linjen  */
    margin-top: 61px;
}

ul#simple-menu{
    list-style-type: none;
    width: 100%;
    height: 27px;
    font-family: "Trebuchet MS",Arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin: 100px;
    padding: 11px 0 0 0;
}

ul#simple-menu li{
    display: block;
    border-top: 1px solid #727272;
    border-right: 1px solid #727272;
    border-left: 1px solid #727272;
    float: left;
    margin: 0 0 0 4px;
    height: 27px;
}

ul#simple-menu li.left{
    margin-left: 250px;
}

ul#simple-menu li a{
    display: block;
    float: left;
    color: #1a1a1a;
    background: #405554;
    line-height: 27px;
    text-decoration: none;
    padding: 0 17px 0 18px;
    height: 27px;
}

ul#simple-menu li a.right{
    padding-right: 19px;
}

ul#simple-menu li a:hover{
    background: #193f40;
}

ul#simple-menu li a.current{
    color: #2E4560;
    background: #fff;
}

ul#simple-menu li a.current:hover{
    color: #2E4560;
    background: #fff;
}
Avatar billede eydun Nybegynder
23. juni 2009 - 12:03 #8
Mærkeligt... Jeg har prøvet din css sammen med

a { text-decoration: none; }
a:hover { background: #cc5630; color: #fff; }

og jeg kan ikke se at menuen bliver underlig? Hverken i Firefox 3.0 eller IE 8.
Avatar billede Slettet bruger
23. juni 2009 - 13:41 #9
hmm ved ikke hvad jeg gjorde galt men nu virker det :D
tak :D
Avatar billede eydun Nybegynder
23. juni 2009 - 14:26 #10
Velbekomme :D
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