2010-10-15 4 views
6

Vedo questo sito che ha un pulsante, quando passo il mouse su di esso lo sfondo cambia.quale stile css gestisce l'evento click su un pulsante? altro che hover

Quando faccio clic sul pulsante, l'ombreggiatura del pulsante inverte reagisce all'evento click.

Quale stile CSS è questo? Lo so: il passaggio del mouse è al passaggio del mouse, ma per quanto riguarda un clic?

+0

avrei pranzavi b e disposto a scommettere che è javascript che fa manipolazioni di immagini. – Gabe

risposta

4

CSS non gestisce gli eventi.

Stai cercando la pseudo classe :active, che è solo per il tag A, non per i pulsanti. Puoi anche applicare uno stile ai tag come pulsanti.

Vedi: http://w3schools.com/CSS/css_pseudo_classes.asp

+2

non fare riferimento a w3schools .... http: //www.w3fools.com/ –

+2

Amico, hai tre anni di ritardo su quel suggerimento. –

+0

... o per essere smilzi, a quanto pare. La barra spaziatrice –

2

Quello che stai guardando è stili predefiniti del browser per la: attiva pseudo-classe, che vale anche per l'input da tastiera su un pulsante (provate tabulazione ad esso e premendo la barra spaziatrice).

Queste pseudo-classi NON si applicano solo all'elemento di ancoraggio, è un comune equivoco causato da versioni precedenti di IE che non le supporta su elementi diversi dall'elemento di ancoraggio.

+0

funziona ma non semplicemente facendo clic su di essi ... –

10

CSS3 gestisce gli eventi di attivazione ora (2013).

La: pseudo-classe attiva sta funzionando su qualsiasi selettore di CSS come BUTTON, non solo A tag.

CSS3 STILE

p { margin: 2em; } 
button { background-color: White; color: SteelBlue; } 
button:hover { background-color: LightSteelBlue; } 
button:active { background-color: SteelBlue; color: White; } 

HTML5

<p> 
     <button>test button with :active pseudo-class</button> 
    </p> 

Demo: http://jsfiddle.net/wp86u/

See: http://www.w3schools.com/css/css_pseudo_classes.asp (Contenuto modificato dal Diodeus risposta)