Hvordan få mouse over effekt med CSS?

Anonym
Anonyms bilde

Hei, jeg lurer på hvordan man får mouseover effekt på ting når man tar musa over dem? Er dette noe man gjør i CSS?

Jeg mener feks på linker. Si man har en link som er grønn, men vil at den skal bli orange når folk tar musa over. Hvordan gjør man dette?

Et annet eksempel er når man vil bruke ett bilde når musa ikke er over og et annet bilde når folk tar musa over. Hvordan får jeg til dette? 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Styling av linker og elementer med hover effekt

Hei, det er faktisk samme teknikken for å få til begge tingene du spør om. Skal forklare deg begge metodene, samt. gi noen tips til hvordan du bør gjøre det med bildene.

Hover effekt på linker

Si du definerer en link, slik:

<a href="http://domene.com" title="Domene.com">domene.com</a>

Dernest styler du den til å være rød med følgende CSS-kode

a {
  color: green;
}

Videre ønsker du hover effekten. Den lager du ved å gjøre følgende:

a:hover {
  color: orange;
}

Husk at du kan bruke hexdesimaler, type #ffffff for å angi fargene. Du kan også bruke rgba(xxx, xxx, xxx, x.xx). Det siste argumentet i rgba er opacity, med det menes gjennomsiktighet.

Hover effekt på bilder

La oss si du skal lage en link som skal ha et ikon. Feks dette: hengelås ikon

Videre hadde jeg redigert bildet av hengelåsen, slik at det ser slik ut.hengelås i farger og svart-hvitt

Her er det ett bilde med hengelåsen i svart-hvitt og farger i samme bildefil, mer om hvorfor senere. Først skal jeg vise deg hvordan jeg definerer linken i HTML og tilhørende class i CSS.

<a class="login" href="#">Logg inn</a>
/* Default state for linken */
a.login {
  background: transparent url('./images/padlock_hover.png') no-repeat;
  background-position: left -30px;
  color: #424242;
  padding-left: 20px;
}

/* Hoover state for linken */
a.login:hover {
  background-position: left 0px;
}

Dette ville gitt linken følgende utseende: . Prøv å ta musen over den!

Grunnen til at jeg ikke bruker to forskjellige bilder av hengelåsen, ett med farger og ett uten, og så skifter hvilket av bildene som skal vises ved hjelp av background: url(), er fordi det ville gjort at hover bildet haddet måtte lastes inn idet brukeren tok musa over det første gangen. Loadingen av ikoner ville ført til at det ville blitt flimmer en kort stund, inntil browseren hadde lastet inn bildet.

Ved å heller skifte background-position i CSS, sørger man for at bildet av ikonet er lastet inn allerede, så flytter man bare på bakgrunnen slik at det fargelagte ikonet vises når brukeren tar musa over.

Håper dette besvarte spørsmålet ditt på en tilfredstillende måte.

Stian
Anonyms bilde
Valgbar mouseover

Hei,

Takk for god forklaring over! Jeg har en annen mouseover-utfordring som jeg håper du kan svare på.

Jeg har en nettside med mange spørsmål. Foran hvert spørsmål er det et ikon som brukeren kan holde musen over og få svar på spørsmålet via en iframe under. Ettersom det er mange spørsmål, er det flere som syntes mouseover effekten er litt i veien, for hvis de kommer borti et annet spørsmål blir svaret de søkte borte.

Så det jeg lurer på, er om det er mulig for den enkelte brukeren å velge å ha mouseover effekt eller ikke? Tenkte på en avkrysningsboks eller noe som slo av/på mouseover effekten.

CSS kan kanskje være en mulig løsning på problemet, men jeg har ikke funnet noen som besvarer denne type problemstilling.

Er svært glad for enhver hjelp til dette,

Stian

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Er litt usikker på hva du

Er litt usikker på hva du mener her. Kommer det tekst når du holder musen over ikonet? Vil du ikke at det skal komme ny tekst når man holder musen over (du vil med andre ord at folk skal måtte trykke for å se svaret)?

Jeg vet jo ikke hvordan din nåværende løsning er bygget, så du må i såfall legge ved en URL slik at jeg kan se det du beskriver i praksis.

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
Det jeg tror han mener er en

Det jeg tror han mener er en slaks javascript som du eventuelt kan trykke på for og få opp en popup boks med infoen i. Ellers så kan du jo bruke ajax. Ajax er jeg ikke så veldig flink til og er ikke akk så super god i javascript eller. Men eneste som er minus med ajax er jo vis du kommer over en anen tekst greie så kommer det jo opp en ny boks. derfor er jo javascript det beste tror jeg.

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Koding

Jeg må uansett se hvordan løsningen hans er bygget for å hjelpe ham. Han vil jo skru av og på funksjonaliteten, men da må man vite hvordan funksjonaliteten er lagt inn i første omgang.

AJAX krever at man bruker JavaScript/jQuery i samhandling med PHP, Perl, eller liknende. AJAX er bare en betegnelse på at man sender forespørsler til serveren uten at siden lastes.

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
aha jeg som ikke henger helt

aha jeg som ikke henger helt med i svingene nå om dagen :P

 
 

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.