Il CSS ha un: sfocatura selettore (pseudo-class)?

So che c’è un :focus selettore di :focus . Non riesco a trovare l’uso o la documentazione di un :blur selettore. Ce n’è uno?

Non c’è :blur pseudo-class nei CSS.

Le pseudo-classi dinamiche , come altre pseudo-classi e in effetti tutti gli altri selettori, rappresentano stati ; non rappresentano eventi o transizioni tra stati in termini di albero del documento. A proposito: la pseudo-class :focus rappresenta un elemento a fuoco; non rappresenta un elemento che ha appena ricevuto lo stato attivo, né esiste una :blur pseudo-class per rappresentare un elemento che ha appena perso lo stato attivo.

Allo stesso modo, questo vale per la pseudo-class :hover . Sebbene rappresenti un elemento su cui è presente un dispositivo di puntamento, non esiste né una pseudo-class :mouseover per un elemento appena puntato, né una pseudo-class :mouseout per un elemento che è stato appena puntato .

Se devi applicare stili a un elemento che non è a fuoco, hai due possibilità:

  1. Usa :not(:focus) (con meno supporto browser):

     input:not(:focus), button:not(:focus) { /* Styles for only form inputs and buttons that do not have focus */ } 
  2. Dichiarare una regola che si applica a qualsiasi elemento indipendentemente dal suo stato di triggerszione e sostituzione per gli elementi che hanno lo stato attivo:

     input, button { /* Styles for all form inputs and buttons */ } input:focus, button:focus { /* Styles for only form inputs and buttons that have focus */ } 

No, il CSS non ha uno pseudo-selettore di sfocatura, presumibilmente perché la sfocatura è più un evento che uno stato. (Non sarebbe chiaro quando qualcosa dovrebbe perdere il suo stato di sfocatura).

Tutti i selettori regolari sono per impostazione predefinita non focalizzati. Quindi non hai bisogno di uno speciale selettore di sfocatura.

Questi sono i selettori per precedenza.

 .myButton .myButton:hover .myButton:focus .myButton:active 

Usa la transizione generale per impostare la transizione di sfocatura.

 .example { transition-property: opacity; transition-duration: 2s; /* This will happen after the hover state and can also be used for consistency on the overall experience */ opacity: 0; } .example:hover { opacity: .8; transition-duration: .3s; transition-delay: .1s; }