Hvordan arbeide med CSS3 Event Selectors - dummies

De fleste CSS3 endringer er statiske - du ber nettleseren å se etter bestemte koder, attributter eller mønstre. Hendelsesvalgere velger imidlertid objekter basert på en bestemt hendelse, for eksempel en mus over.

Når brukeren svever musepekeren over et objekt, endres objektets formatering for å indikere at hendelsen har skjedd. Når brukeren beveger musepekeren av objektet, går formateringen tilbake til normal. Følgende liste forteller deg om hendelsesvalgere som dokumenter ofte bruker.

• : svever: Velger et objekt når musemarkøren er svevet over den. Utviklere benytter vanligvis denne funksjonen til å vise at et element er valgt eller for å vise detaljer om et objekt. Du ser denne funksjonen ganske ofte brukt med menysystemer for å vise undermenyelementene.

• : fokus: Velger en gjenstand når objektet har inngangs- (tastatur) fokus. Det brukes vanligvis med skjemaer for å vise hvilket felt som er valgt for inngang. En interessant bruk av denne velgeren er å vise det valgte feltet i en skriftstørrelse med større størrelse for å gjøre innspillingen enklere.

Hendelsesvelgerne er nyttige fordi du kan bruke dem til å få det til å se at siden samhandler med brukeren uten å skrive enda en linje med kode. Alt skjer som en del av en stil. Følgende prosedyre viser en måte å bruke hendelsesvelgerne til å gi en visuell effekt.

1. Opprett ExternalCSS. HTML og ExternalCSS. CSS-filer og kopier dem til en ny mappe.

2. Åpne ExternalCSS. CSS.

3. Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

   p: svever, h1: svever {tekst-dekorasjon: ingen; font-familie: "Arial", sans-serif; skriftstørrelse: xx-stor; farge: BlueViolet; bakgrunnsfarge: Plum;}
   

4. Last testsiden.

5. Hold musepekeren over punktteksten.

   Du ser effekten av å gjøre stilendringen. Tekstenes stil endres for å matche utvalgskriteriene.

   

6. Hold musen over toppteksten.

   Tekstteksten returnerer til normal og topptekstteksten stemmer nå med utvalgskriteriene. Du kan bruke denne tilnærmingen med et hvilket som helst objekt på skjermen og gjøre noen form for endring ønsket.