1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. セレクター
  5. :hover

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

:hover

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

:hover は CSS の擬似クラスで、ユーザーがポインティングデバイスで反応した要素に一致します。この擬似クラスは、一般的にユーザーがマウスボタンを押さずにカーソル（マウスポインター）を要素の上にかざしたときに発動します。

試してみましょう

.joinBtn {
  width: 10em;
  height: 5ex;
  background-color: gold;
  border: 2px solid firebrick;
  border-radius: 10px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}

.joinBtn:hover {
  background-color: bisque;
}

<p>クエストに参加しますか？</p>
<button class="joinBtn">確認</button>

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

メモ: :hover擬似クラスはタッチスクリーン上で問題を招きます。ブラウザーによっては、:hover擬似クラスがまったく一致しなかったり、要素に触れた直後の一瞬だけ一致したり、ユーザーがタッチを止めた後も別の要素に触れるまで一致し続けたりする可能性があります。ウェブ開発者は、ホバー機能が制限されている、あるいは存在しない端末でもコンテンツが利用可能であるよう考慮すべきです。

構文

css
:hover {
  /* ... */
}

例

基本的な例

HTML

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

CSS

css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}

結果

仕様書

Specification
HTML
# selector-hover
Selectors Level 4
# hover-pseudo

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content