Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

User action pseudo-classes

:active は CSS の擬似クラスで、ユーザーによってアクティブ化されている要素（ボタンなど）を表します。マウスを使用する場合は、「アクティブ化」とはふつう、主ボタンを押し下げたときに始まります。

擬似クラスインタラクション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:active
1
12
1
1
18
1
non a elements

非「a」要素のサポート
1
12
1
1
18
1
その他
css.selectors.focus

`:フォーカス`
1
12
1
1
18
1
css.selectors.hover

`:ホバー`
1
12
1
2
18
1
CSS セレクタ
a elements

`<a>` 要素のサポート
1
12
1
2
18
1
all elements

すべての要素をサポート
1
12
1
2
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • デフォルトでは、iOS 上の Safari は、関連する要素または `<body>` 要素に `touchstart` イベント ハンドラーがない限り、`:active` 状態を使用しません。
注釈 1件
実装メモ
  • iOS 7.1.2 の Safari では、クリック可能な要素をタップすると、要素は `:hover` 状態になります。 別の要素が `:hover` 状態になるまで、要素は `:hover` 状態のままになります。
注釈 1件
実装メモ
  • Edge では、要素の上にマウスを置き、ポインタを動かさずに上下にスクロールすると、ポインタが移動されるまで要素は `:hover` 状態のままになります。

基本構文

CSS 
button:hover { background-color: #eee; }
button:active { transform: scale(0.98); }
button:focus { outline: 2px solid blue; }

ライブデモ

:hover effect

CSS:hover effect demo.

プレビュー全画面表示

:active effect

CSS:active effect demo.

プレビュー全画面表示

:focus effect

CSS:focus effect demo.

プレビュー全画面表示

実務での使いどころ

  • ボタンの操作フィードバック

    ホバー、クリック、フォーカスの各状態で異なるスタイルを適用し、ユーザーに視覚的なフィードバックを提供します。

注意点

  • :hover はタッチデバイスでは期待通りに動作しない場合があり、タッチフレンドリーな代替手段も用意してください。

アクセシビリティ

  • :focus スタイルは必ず視認可能に保ち、outline: none で非表示にしないでください。キーボードユーザーにとって不可欠です。

参考リンク