: aktiivinen - CSS-temppuja

Anonim

:activePseudo valitsin muuttaa ulkonäkö linkin, kun se on aktivoitu (sitä napsautetaan tai muulla tavalla aktivoitu). Se nähdään yleensä vain sekunnin päässä ja antaa visuaalista palautetta siitä, että elementtiä todella napsautettiin. Sitä käytetään tyypillisesti ankkurilinkeissä ( ).

Esimerkiksi tässä on CSS, joka saa ankkurilinkit törmäämään yhteen pikseliin (antaa vaikutelman kolmiulotteisessa tilassa työntymisestä) aktiivisessa tilassa:

Katso Kynä: aktiivinen tila CSS-Tricks Teamin (@ css-tricks) toimesta CodePenillä.

: Aktiivinen voi koskea myös mitä tahansa elementtiä. Kun napsautat alla olevaa kynää, napsauttamalla mitä tahansa sivun kohtaa koko sivu on keltainen:

Katso CSS-Tricks-tiimin (@ css-tricks): aktiivisen psuedo-luokan kynän esittely CodePenistä.

Paras käytäntö on kattaa kaikki "valtiot", erityisesti linkkien osalta. Helppo tapa tehdä se on “LOVE HATE” tai

L: linkki
O
V: vieraili
E

H: leijuva
A: aktiivinen
T
E

Niiden tekeminen tässä järjestyksessä on ihanteellista.

a:link ( /* Essentially means a(href), or that the link actually goes somewhere */ color: blue; ) a:visited ( color: purple; ) a:hover ( color: green; ) a:active ( color: red; )

Muussa tapauksessa sano, jos luetit viimeksi: käydyn tyylin viimeisenä, jos kyseisessä linkissä käytiin, se ohittaa: aktiivinen ja: hover-ilmoituksen ja linkki olisi aina violetti riippumatta siitä, vietitkö vai onko linkki aktiivinen (ei ihanteellinen).

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
Jep 2.0.4+ minkä tahansa 4+ 4+ TBD TBD