Endre bakrunnsfarge på hover

are47 · 14. november 2004

Har en div som jeg bruker som link til en side.

Jeg vil at når den div'n for hover (musepeker over seg) skal den få en annen farge, noen som vet hvordan jeg kan fikse dette?

-Takk

halvardm · 14. november 2004

div#bla:hover {
background-color: #FFF;
}

?

PoleCat · 14. november 2004

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 14. november 2004 av PoleCat

halvardm · 14. november 2004

Mhm..

Håper det får inn nok klager eller skjønner det at de må oppdatere IE ganske kraftig til neste versjon for å henge med... :ermm:

are47 · 14. november 2004

Finnes det en slags fix slik at dette fungerer på IE da? :s

Takk for svar btw.

PoleCat · 14. november 2004

Les min edit over.

are47 · 14. november 2004

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:

PoleCat · 15. november 2004

Hm, lurer på om dette også kan ha med doctype å gjøre... :hmm:

Prøv med:

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

are47 · 15. november 2004

Men den doctypen ble ihvertfall alt likt i FF, Opera og IE.

Men desverre ikke slik jeg ville det, width'n blir bare auto, og ikke 200px; slik jeg setter den som

PoleCat · 15. november 2004

Poster du hele koden her, både HTML og CSS. Kan ha noe med parent element eller lignende som gjør det.

enden · 15. november 2004

Blir det for teit å putte div-en inn i a-elementet i stedet for å gjøre det slik PoleCat viste?

Haraldson · 15. november 2004

Block-element i et inline-element, enden? Fy fy.

enden · 15. november 2004

Der kom aberet ja :blush:

are47 · 15. november 2004

<!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>

PoleCat · 15. november 2004

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 15. november 2004 av PoleCat

Logg inn

Endre bakrunnsfarge på hover

Anbefalte innlegg

are47

Videoannonse

halvardm

PoleCat

halvardm

are47

PoleCat

are47

PoleCat

are47

PoleCat

enden

Haraldson

enden

are47

PoleCat

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer