web-dev-qa-db-ja.com

CSSには：blurセレクター（擬似クラス）がありますか？

:focusセレクターがあることは知っています。 :blurセレクターの使用またはドキュメントを見つけることができないようです。あるの？

csscss-selectorspseudo-class
48
user656925

CSSには_:blur_擬似クラスはありません。

dynamic pseudo-classes は、他の擬似クラスおよび他のすべてのセレクターと同様に、states;を表します。これらは、ドキュメントツリーに関してイベントまたは状態間の遷移を表しません。つまり、_:focus_擬似クラスは、is in focus;という要素を表します。 receivedフォーカスを持つ要素を表すものではなく、lostフォーカスを持つ要素を表す_:blur_擬似クラスも存在しません。

同様に、これは_:hover_疑似クラスに適用されます。ポインティングデバイスが上にある要素を表しますが、pointed toまたは_:mouseover_ pseudo-である要素の_:mouseout_疑似クラスはありません。 からの先になったばかりの要素のクラス。

ではないの要素にスタイルを適用する必要がある場合、2つの選択肢があります。

  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 */
}
_
87
BoltClock

いいえ、CSSにはblur擬似セレクターがありません。これはおそらく、ぼかしは状態よりもイベントに近いためです。 （何かがぼかし状態を失うべきかは不明です）。

5
Utkanos

すべての通常のセレクターはデフォルトではフォーカスされていません。そのため、特別なぼかしセレクターは必要ありません。

これらは優先順位によるセレクタです。

.myButton
.myButton:hover
.myButton:focus
.myButton:active
3
Torsten Walter

一般的なトランジションを使用して、ぼかしトランジションを設定します。

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