css - CSS 是否有 :blur 选择器（伪类）？

Question

我知道有一个:focus选择器。我似乎找不到:blur选择器的使用或文档。有吗？

Answer 1

CSS中没有:blur伪类。

动态伪类与其他伪类以及实际上所有其他选择器一样，表示状态；它们不代表文档树中状态之间的事件或转换。也就是说：:focus伪类代表一个焦点元素；它不代表一个刚刚获得焦点的元素，也不存在一个伪类来代表一个刚刚失去焦点的元素。:blur

同样，这适用于:hover伪类。虽然它表示一个上面有一个指针设备的元素，但对于刚刚被指向:mouseover的元素既没有伪类，也没有刚刚被指向的元素的伪类。:mouseout

如果您需要将样式应用于未聚焦的元素，您有两种选择：

1. 使用:not(:focus)（浏览器支持较少）：

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

2. 声明适用于任何元素的规则，无论其焦点状态如何，并覆盖具有焦点的元素：

   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

不，CSS 没有 blur 伪选择器，大概是因为 blur 更像是一个事件而不是一个状态。（不清楚什么时候应该失去模糊状态）。

Answer 3

默认情况下，所有常规选择器都不聚焦。所以你不需要特殊的模糊选择器。

这些是优先选择器。

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

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