1

次のような入力フィールド CSS があります。

input {
   background: white;
   border: 1px solid #bbb;
   box-shadow: none;
}

input:hover {
   background: white;
   border: 1px solid #999;
   outline: none;
   box-shadow: none;
 }

input:focus {
   outline: none;
   box-shadow: none;
   border: 1px solid #555;
}

私の問題は、入力フォーカスを与えると、カーソルも上にある場合にホバー効果が引き継がれること<input>です。

入力にフォーカスがない場合にのみホバー効果を機能させる方法はありますか?

4

1 に答える 1

2

あなたが提供したコードでは問題を再現できないため、これは特異性の問題であると私は信じています。(それが何かわからない場合は、特異性についてのブログ投稿を本日以前に書きました: 特異性とは何ですか? )

あなたが提供したコードでは、input:hoverとinput:focusの両方が011. がスタイルシートの後input:focusに含まれている限り、スタイルは常に. input:hoverfocus:hover

最初の JSFiddle デモ。

追加のセレクターがある場合:hover、その特異性は:focusセレクターよりも高くなります。例えば：

input.example:hover { ... }
input:focus { ... }

2 番目の JSFiddle デモ。

追加の を使用すると、上記classの:hoverセレクターの特異性が になり、まだ特異性が低いセレクターを021オーバーライドします。:focus011

:focusセレクターの特異性が高く:hover、要素がフォーカスされているときに適用されないことを確認してください。

于 2013-11-04T15:45:52.970 に答える