Hvordan lage Mouse Link fargeendringer

Du kan endre farge på linker på nettet når noen ruller over lenken eller klikk på den. En rask måte å lage en mouse lenke fargeendring er med Cascading Style Sheets. Cascading Style Sheets hjelpe deg å lage konsistente sider i hele nettstedet ditt.

Bruksanvisning

Opprette en Mouse Link Color i en separat CSS-fil

1 Åpne din favoritt web editor og lage en Cascading Style Sheet fil for koden din.

2 Legg til følgende kode i CSS-filen:
et {
color: # 0000FF;
text-decoration: underline;
}
a: hover {
color: # 000000;
text-decoration: none;

}

Koden ovenfor endrer en blå lenke med understreking til en svart kobling uten understreking under en mouse. Endre mouse koblingen farger (0000FF og 000000) til fargene du vil bruke.

3 Lagre filen som "style.css" eller filnavnet du ønsker å bruke. Sørg for å forlate "css" filtypen i filnavnet. Ikke la din tekst editor legge til en ".txt" filtypen.

4 Åpne HTML-dokument hvor koden skal brukes og legg til følgende kode mellom hodet tag:
<Link rel = "stylesheet" type = "text / css" href = "style.css" />

5 Lagre HTML-fil og forhåndsvise arbeidet i en nettleser. Hver side som inneholder koden: "<link rel =" stylesheet "type =" text / css "href =" style.css "/>" i hodet tag vil bli berørt.

Opprette en Mouse Link Color Inne i HTML-fil

6 Åpne din favoritt web-redaktør og HTML-dokumentet du jobber med.

7 Legg til følgende kode mellom hodet tag:
<Style type = "text / css">
et {
color: # 0000FF;
text-decoration: underline;
}
a: hover {
color: # 000000;
text-decoration: none;

}
</ Style>
</ Head>

Koden ovenfor endrer en blå lenke med understreking til en svart kobling uten understreking under en mouse. Endre mouse koblingen farger (0000FF og 000000) til fargene du vil bruke.

8 Lagre filen og forhåndsvise den i en nettleser. Hver kobling i HTML-dokumentet vil bli berørt.

Lag Mouse Link Color Change for -lenker

9 Følg instruksjonene for å lage en mouse kobling i en egen fil eller i HTML-dokumentet.

10 Erstatt koden i trinn 2 med følgende for valgt alternativ:
a.blue {
color: # 0000FF;
text-decoration: none;
}
a.blue:hover {
color: # 000000;
text-decoration: none;

}
</ Style>

Du kan erstatte "a.blue" og "a.blue:hover" med navn som gjelder for dine mouse koblingen farger.

11 Ring inn koden til handling ved å legge til følgende kode i body-koden for linkene du ønsker endret:
<a href="http://somelinkhere.com" class="blue"> litt tekst link her </a>

Igjen, kan du erstatte "blue" med klassenavnet du opprettet for koblingen forrige trinn.

12 Lagre HTML-fil og forhåndsvise den i en nettleser. Dine mouse koblinger er nå klar for web.