From 3244d75fbc4f86221ba34678776b0c9310b2d96f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 20:28:59 +0900 Subject: 2021/12/04 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_hover/index.md | 115 ++++++++++++--------------------- 1 file changed, 41 insertions(+), 74 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/_colon_hover/index.md b/files/ja/web/css/_colon_hover/index.md index 5a6feb6729..ff9733e05f 100644 --- a/files/ja/web/css/_colon_hover/index.md +++ b/files/ja/web/css/_colon_hover/index.md @@ -3,102 +3,69 @@ 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 }}
+{{ CSSRef }} -

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

+**`:hover`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル (マウスポインター) を要素の上でかざしたときにそうなります。 -
/* 「ホバー」状態の <a> 要素を選択します */
+```css
+/* 「ホバー」状態の  要素を選択します */
 a:hover {
   color: orange;
-}
+} +``` -

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

+`:hover` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{ cssxref(":link") }}、{{ cssxref(":visited") }}、 {{ cssxref(":active") }}) によって上書きされます。適切にリンクにスタイルを適用するには、 `:hover` の規則を `:link` と `:visited` の後、 `:active` の前に置き、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。 -
注: :hover 擬似クラスはタッチスクリーンで問題になります。ブラウザーによっては、 :hover 擬似クラスが全く選択されなかったり、要素をタッチした直後だけ選択されたり、ユーザーが指を離しても選択され続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
+> **Note:** `:hover` 擬似クラスはタッチ画面で問題になります。ブラウザーによっては、 `:hover` 擬似クラスに全く一致しなかったり、要素をタッチした直後だけ一致したり、ユーザーが指を離しても一致し続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。 -

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

基本的な例

+### 基本的な例 -

HTML

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

CSS

+#### CSS -
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}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Basic_example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Chromium bug #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport](https://code.google.com/p/chromium/issues/detail?id=370155) +- [Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.](https://code.google.com/p/chromium/issues/detail?id=306581) -- cgit v1.2.3-54-g00ecf