From 4e7f38b255e10211ec0e438036bce18142fe0a0e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 15:47:20 +0900 Subject: 言語擬似クラス、位置擬似クラス、ユーザー操作擬似クラスを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_hover/index.html | 104 ------------------------------- 1 file changed, 104 deletions(-) delete mode 100644 files/ja/web/css/_colon_hover/index.html (limited to 'files/ja/web/css/_colon_hover/index.html') diff --git a/files/ja/web/css/_colon_hover/index.html b/files/ja/web/css/_colon_hover/index.html deleted file mode 100644 index 5a6feb6729..0000000000 --- a/files/ja/web/css/_colon_hover/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: ':hover' -slug: Web/CSS/:hover -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web - - 擬似クラス -browser-compat: css.selectors.hover -translation_of: Web/CSS/:hover ---- -
{{ CSSRef }}
- -

:hover は CSS の 擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル (マウスポインター) で要素の上をホバー (通過) させたときにこの状態になります。

- -
/* 「ホバー」状態の <a> 要素を選択します */
-a:hover {
-  color: orange;
-}
- -

:hover 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{ cssxref(":link") }}、{{ cssxref(":visited") }}、 {{ cssxref(":active") }}) によって上書きされます。適切にリンクにスタイルを適用するには、 :hover の規則を :link と :visited の後、 :active の前に置き、 LVHA 順: :hover — :visited — :hover — :active で定義されるようにしてください。

- -
注: :hover 擬似クラスはタッチスクリーンで問題になります。ブラウザーによっては、 :hover 擬似クラスが全く選択されなかったり、要素をタッチした直後だけ選択されたり、ユーザーが指を離しても選択され続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
- -

構文

- -{{csssyntax}} - -

例

- -

基本的な例

- -

HTML

- -
<a href="#">このリンクの上を通過させてみてください。</a>
- -

CSS

- -
a {
-  background-color: powderblue;
-  transition: background-color .5s;
-}
-
-a:hover {
-  background-color: gold;
-}
- -

結果

- -

{{EmbedLiveSample("Basic_example")}}

- - - -

:hover 擬似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、このデモを参照してください。

- -
注: :checked 擬似クラスを (隠れたラジオボタンに適用して) 使用した同様の効果の例として、 :checked のリファレンスページから取ったこのデモも参照してください。
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書備考連絡先
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}:hover があらゆる擬似要素に適用できるようになった。CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}初回定義。
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - -- cgit v1.2.3-54-g00ecf