type - ¿CSS tiene un selector de desenfoque(pseudo-clase)?

first-of-type

Question

Sé que hay un :focus selector de :focus . Parece que no puedo encontrar el uso o la documentación de un selector de :blur . ¿Hay alguno?

Answer 1

No hay :blur pseudoclase en CSS.

Las pseudo-clases dinámicas , al igual que otras pseudo-clases y, de hecho, todos los demás selectores, representan estados ; no representan eventos o transiciones entre estados en términos del árbol de documentos. A saber: la :focus representa un elemento que está en foco; no representa un elemento que acaba de recibir el foco, ni existe una :blur pseudoclase para representar un elemento que acaba de perder el foco.

Del mismo modo, esto se aplica a la :hover . Si bien representa un elemento que tiene un dispositivo señalador sobre él, no hay ni una :mouseover para un elemento al que se acaba de apuntar ni una :mouseout para un elemento del que se acaba de apuntar .

Si necesita aplicar estilos a un elemento que no está enfocado, tiene dos opciones:

1. Uso :not(:focus) (con menos compatibilidad con el navegador):

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

2. Declare una regla que se aplica a cualquier elemento independientemente de su estado de enfoque y anule los elementos que tienen foco:

   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

No, CSS no tiene ningún pseudo-selector borroso, presumiblemente porque el desenfoque es más un evento que un estado. (No estaría claro cuándo algo debería perder su estado de desenfoque).

Answer 3

Todos los selectores regulares no están enfocados por defecto. Entonces no necesitas un selector de desenfoque especial.

Estos son los selectores por precedencia.

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

Answer 4

Use la transición general para establecer la transición de desenfoque.

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