Gå til innhold

Endre bakrunnsfarge på hover

are47

Av are47
i Programmering og webutvikling

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
PoleCat

PoleCat

Skrevet
Skrevet (endret)

Skomaker har rett, men husk at dette ikke funker i IE, da den ikke støtter :hover på annet enn a-elementer.

 

Screw IE!

 

EDIT: Leste ikke innlegget ditt skikkelig. En div skal ikke brukes som en lenke, formater heller a-elementet til å se ut som en boks:

 

a#lenke {
display: block;
overflow: hidden;
padding: 200px 0 0 0;
height: 0 !important;
height /**/: 200px;
background: #ccc;
width: 200px;
}

a#lenke:hover {
background: #000;
}

 

<a id="lenke" href="http://www.hw.no/">Hardware.no</a>

 

Da funker det i IE også. :thumbup:

Endret av PoleCat
Lenke til kommentar
are47

are47

Skrevet
  • Forfatter
Skrevet

Takk, det funket bra.

Men det funket faktisk ikke å sette en width på block'n.

Eller, det funka i IE og Opera, men i FF ble block'n like lang som selve teksten inni.

Jeg vil ha den i en bestemt størrelse :)

 

Maser kanskje litt her, men er viktig :whistle:

Lenke til kommentar
are47

are47

Skrevet
  • Forfatter
Skrevet 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
 <title></title>
 <style type="text/css">

a#link {
  padding-left: 5px;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-right: 1px;
  border: 1px solid #636363;
  background-color: red;
  width: 200px;
  height: auto;
  margin-bottom: 2px;
  margin-right: 2px;
  color: #fff;
  text-decoration: none;
}

a#link:hover {
background: blue;
}

</style>
</head>

<body>

<div style=" width: 200px; height: 20px; border: 1px solid blue; padding: 2px;">
  <a id="link" href="#">Hjem</a>
</div>

</body>

</html>

Lenke til kommentar
PoleCat

PoleCat

Skrevet
Skrevet (endret)

Du har ikke display: block på a#link som jeg viste deg over, ergo vil den oppføre seg som et inline-element. En annen ting du skal huske på er at padding vil bli lagt til på bredden, ergo 206px totalt i dette tilfellet (IE5 legger ikke til). :)

 

EDIT: Renskrevet:

a#link {
 display: block;
 overflow: hidden;
 padding: 2px 1px 2px 5px;
 border: 1px solid #636363;
 background-color: red;
 width: 194px !important;
 width /**/ : 200px;
 margin: 0 2px 2px 0;
 color: #fff;
 text-decoration: none;
}

Endret av PoleCat
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...