CSS真的有：模糊选择（伪类）？(Does CSS have a :blur selector (p

我知道有一个:focus选择。 我似乎无法找到使用或文档A的:blur选择。 是否有一个？

Answer 1:

没有:blur的CSS伪类。

该动态伪类 ，像其他伪类，事实上所有其他选择，表示状态 ; 他们并不代表文档树方面状态之间的 事件或转换 。 即：该: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没有模糊伪选择，大概是因为模糊是一个多状态事件。 （这将是不清楚的东西时，应失去其模糊状态）。

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

文章来源: Does CSS have a :blur selector (pseudo-class)?