CSSのマウスダウンセレクターとは何ですか？

113

ボタンやその他の要素にはデフォルトのスタイルがあり、3つのステップで動作することに気づきました：通常のビュー、ホバー/フォーカスビュー、マウスダウン/クリックビュー、CSSでは通常のビューとホバービューのスタイルを次のように変更できます：

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

しかし、どうすればマウスダウンを選択できますか？私はこのようなものが欲しい：

button:mousedown{
  //some styling
}

ありがとう

html css css-selectors

— マルチメディアxp
ソース

1

stackoverflow.com/questions/2725458/css-on-mouse-downの

— ザビエル

@ x4vier：そうは思いません。この場合も、「マウスダウン」が何を意味するのかを判断するのは困難です。

— BoltClock

160

私はあなたがアクティブな状態を意味すると思います

 button:active{
  //some styling
 }

これらは、CSSでリンクが持つ可能性のあるすべての疑似状態です。

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

参照：http : //www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

— jansmolders86
ソース

2

特にモバイルデバイスでは、ホバーが醜い不具合を引き起こすため、リンクは必要ありません。ボタンが必要です。おかげで

— multimediaxp

その場合は、ボタンのスタイルをより完全に設定します。ボーダーを追加することにより：0; あなたはボタンの周りのベゼルとあなたが抱えている問題を失います。

— jansmolders86 2013年

@ jansmolders86 cssの画像またはボタンにマウスオーバー、マウスリーブ、マウスダウン、マウスアップのセレクターがあるかどうか知っていますか？

— Ng2-Fun 2016

@ J.Funはそうではありません。over/ leaveに：hover状態を使用し、down / upに：activeを使用して、目的の効果を得ることができます。しかし、JavaScriptなしでは2つを区別することはできません。

— jansmolders86 2016年

50

これはマウスダウンイベントのように動作することがわかりました。

button:active:hover {}

— ショーン
ソース

33

上級者向けのメモ：何らかの理由で、CSS構文を有効にするには、同じ要素のの後に:activeスニペットが必要です:hover

http://www.w3schools.com/cssref/sel_active.asp

— woohooGuy
ソース

2

CSSは順番に評価されるため、これは理にかなっています。要素は:activeそれより前になることはできません:hover。

— InTheZone

2

また、それ:activeが機能するためには後でなければなりません:focus。これを指摘してくれてありがとう、なぜCSSが効果がないのか本当に頭を悩ませていました！

— マイケル

1

@InTheZoneもちろん：hoverされる前に：activeになることができます。ホバーしないキーボードでアクティブ化できます。

— ANeves

2

私は最近:active:focus、CSSで:active:hoverカスタムCSSライブラリをオーバーライドする必要がある場合と同じことを行うことがわかりました。

— ミーズ
ソース