У CSS есть: селектор размытия (псевдокласс)?

Ответ 1

В CSS нет псевдо-класса :blur.

динамические псевдоклассы, как и другие псевдоклассы, а на самом деле все остальные селектора представляют состояния; они не представляют события или переходы между состояниями в терминах дерева документов. Для этого: псевдо-класс :focus представляет собой элемент, который находится в фокусе; он не представляет собой элемент, который только что получил фокус, и не существует псевдо-класса :blur для представления элемента, который только что потерял фокус.

Аналогично, это относится к псевдоклассу :hover. Хотя он представляет элемент, который имеет над ним указательное устройство, не существует псевдо-класса :mouseover для только что указанного элемента или псевдо-класса :mouseout для элемента, который только что был направлен от.

Если вам нужно применить стили к элементу, который не находится в фокусе, у вас есть два варианта:

• Используйте :not(:focus) (с меньшей поддержкой браузера):

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

• Объявить правило, применимое к любому элементу независимо от его состояния фокусировки, и переопределить для элементов, имеющих фокус:

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

Ответ 2

Нет, CSS не имеет псевдоселектора размытия, предположительно потому, что размытие является скорее событием, чем состоянием. (Было бы непонятно, когда что-то должно потерять свое состояние размытия).

Ответ 3

Все обычные селектора по умолчанию не сосредоточены. Поэтому вам не нужен специальный селектор размытия.

Это селекторы по приоритету.

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

Ответ 4

Используйте общий переход для установки перехода размытия.

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