mouseover med et bilde...

[Christian_]

Jeg kikket på en side som noen hadde linket til i webkafen, og prøvde å finne ut hvordan de lage en mouse over med kun et bilde... tok et eksempel... så satt han inn en kode og når man tok musen over bilde så vises den nedre delen...

kikket på css'en også uten resultat

kan noen forklare?

[Cucum(r)]

Du kan lese med om denne metoden på WellStyled.com

[svamp]

#menu li a {
display: block;
overflow: hidden;
height: 21px;
width: 136px;
background-repeat: no-repeat;
text-decoration: none;
margin: 0 0 13px 0;
}

#menu li a:hover {
background-position: bottom;
}

(^fra purify sin CSS)

 

Det du gjør er å legge inn et bilde som bakgrunn i linken, som du ser må den ha

display:block og width og height.

Bildet setter du background-position på, f.eks top i dette tilfellet (men det ser ut som det skjer automatisk også).

På hover-state'n endrer du background-position til bottom, og vips, den nederste delen vises.

Endret 25. oktober 2004 av svamp