Hover: flytte linken 3px opp.

[realfingolfin]

Hvordan får jeg til en hovereffekt som får linken til "hoppe " opp 3-4 px.

 

eks: musa går over linke og linken jopper opp.

[PoleCat]

a:hover {
 margin-top: -3px;
}

[realfingolfin]

a:hover {
 margin-top: -3px;
}

den funker ikke :

body {
background-color :#34606F; 
color : #000000; 
font-family : Arial, Verdana; 
font-size : 8pt; 
margin-top: 0px;
margin-left: 10px;
margin-right: 0px;
} 
b {
background-color : inherit; 
color : #000000; 
font-size : 8pt; 
font-style : normal; 
font-family : Verdana, Arial; 
} 
p {
background-color : inherit; 
color : #000000; 
font-size : 8pt; 
font-style : normal; 
} 
hr {
background-color : inherit; 
color : #0000FF; 
} 
h1 {
background-color : inherit; 
font-size : 18pt; 
color : #000000; 
font-weight : bold;
} 
h2 , h3 {
background-color : inherit; 
color : #000000; 
font-size : 14pt; 
font-weight : bold; 
} 
h3 {
background-color : inherit; 
color : #000000; 
font-size : 12pt; 
font-weight : bold; 
} 
li {
background-color : inherit; 
color : #000000; 
font-size : 8pt; 
font-style : normal; 
} 
a:link {
background-color : inherit; 
color : #000000; 
font-size : 8pt; 
text-decoration : none; 
font-weight : bold;
} 
a:visited {
background-color : inherit; 
color : #000000; 
font-size : 8pt; 
text-decoration : none; 
font-weight : bold;
} 
a:hover { 
margin-top: -3px;
background-color : inherit; 
color : #34606F;
font-size : 12pt; 
text-decoration : normal; 
font-weight : bold;
} 
a:active {
background-color : inherit; 
color : #000000; 
text-decoration : none; 
} 
td {
background-color : #C9D3D4; 
color : #000000; 
font-family : Verdana, Arial; 
font-size : 8pt; 
font-style : normal; 
} 
td.headcell {
background-color : #ffffff; 
color : #000000; 
font-size : 8pt; 
font-style : normal; 
} 
td.bodycell {
background-color : #ffffff; 
color : #000000; 
font-style : normal; 
} 
td.subcell {
background-color : #ffffff; 
color : #000000; 
font-style : normal; 
} 
td.outline {
background-color : #000000; 
color : #ffffff; 
font-style : normal; 
} 
td.bg {
background-color : #AAAAAA; 
color : #ffffff; 
font-style : normal; 
} 
td.top {
background-color : #212121; 
color : #000000; 
} 
td.menu {
background-color : #212121; 
} 
.form {
background-color : #ffffff; 
color : #000000; 
font-size : 8pt; 
font-family : verdana, Verdana, helvetica, sans-serif; 
border-right : 1px solid #000000; 
border-top : 1px solid #000000; 
border-left : 1px solid #000000; 
border-bottom : 1px solid #000000; 
} 
input.textarea {
background-color : #ffffff; 
color : #000000; 
font-family : Verdana, Verdana, Helvetica, Sans-Serif; 
font-size : 8pt; 
} 
input.checkx {
background-color : #7a8ea6; 
color : #000000; 
font-family : Verdana, Verdana, Helvetica, Sans-Serif; 
font-size : 8pt; 
font-style : normal; 
} 
input.checky {
background-color : #7a8ea6; 
color : #000000; 
font-family : Verdana, Verdana, Helvetica, Sans-Serif; 
font-size : 8pt; 
font-style : normal; 
} 
img { 
border-color: #ffffff;
} 

[PoleCat]

Hva med

 

a {
 padding: 3px 0 0 0;
}

a:hover {
 padding: 0;
}

 

?

 

Akkurat hvordan du bør gjøre det, kommer litt an på hvor i koden din du skal ha a-elementet. F.eks om det ikke står innenfor avsnitt eller lignende, kan du alltids gjøre det om til blokk-element, og da burde det ikke være et problem

[Simon Zimmermann]

@realfingolfin: Du vet at det er mulig å definere samme verdi for flere elementer på en gang?

Det gjør i hvert fall at koden din blir mye kortere.

Her er et eksempel på en verdi som går igjen veldig mange ganer.

b ,p ,hr,h1, h2, h3, li, a, {
background-color : inherit; 
//color: #000;
}

Endret 1. oktober 2004 av Waldmeister