Le CSS a-t-il un sélecteur: blur (pseudo-classe)?

Question

Je sais qu'il y a un :focus sélecteur. Je n'arrive pas à trouver l'utilisation ou la documentation d'un :blur sélecteur. Est-ce qu'il y a un?

Answer 1

Il n'y a pas de pseudo-classe :blur En CSS.

Les pseudo-classes dynamiques , comme les autres pseudo-classes et en fait tous les autres sélecteurs, représentent les états ; ils ne représentent pas les événements ou les transitions entre états en termes de document arbre. À savoir: la pseudo-classe :focus Représente un élément qui est au foyer ; il ne représente pas un élément qui vient de recevoir le focus , ni de pseudo-classe :blur pour représenter un élément qui a juste perdu focus.

De même, cela s'applique à la pseudo-classe :hover. Bien qu'il représente un élément sur lequel se trouve un dispositif de pointage, il n'y a pas de pseudo-classe :mouseover Pour un élément qui vient d'être pointé sur ni une pseudo-classe :mouseout pour un élément qui vient d'être pointé loin de .

Si vous devez appliquer des styles à un élément qui n'est pas dans le focus , vous avez deux choix:

1. Utilisez :not(:focus) (avec moins de prise en charge du navigateur):

   input:not(:focus), button:not(:focus) {
       /* Styles for only form inputs and buttons that do not have focus */
   }
   

2. Déclarez une règle qui s'applique à n'importe quel élément quel que soit son état de focus et remplacez pour les éléments qui ont le focus:

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

Answer 2

Non, CSS n'a pas de pseudo-sélecteur de flou, probablement parce que le flou est plus un événement qu'un état. (Il ne serait pas clair quand quelque chose devrait perdre son état de flou).

Answer 3

Par défaut, tous les sélecteurs ne sont pas focalisés. Vous n'avez donc pas besoin d'un sélecteur de flou spécial.

Ce sont les sélecteurs par priorité.

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

Answer 4

Utilisez la transition générale pour définir la transition floue.

.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;
}