【CSS Modules】hoverメディア機能の使い方
hoverメディア機能の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
hoverオブジェクトは、ユーザーの主要な入力メカニズムが要素にホバーできる能力の有無を表すオブジェクトです。これはCSS Media Queriesで使用されるメディア特性の一つであり、ウェブサイトの閲覧環境がポインティングデバイス（例：マウス、トラックパッド）を使ったホバー操作に対応しているかどうかを判定するために利用されます。
このhoverオブジェクトは、主に以下の二つの状態を持ちます。一つはhoverで、これはユーザーの主要な入力デバイスが要素にホバーする機能を持っている場合に適用されます。例えば、デスクトップパソコンでマウスを使用している環境などがこれに該当します。もう一つはnoneで、ユーザーの主要な入力デバイスがホバーする機能を持っていない場合に適用されます。具体的には、タッチスクリーンのみのスマートフォンやタブレット、あるいはキーボード操作が主な環境などが含まれます。
この特性は、主にレスポンシブデザインにおいて、異なるデバイスや操作方法に応じたユーザーインターフェースを提供するために役立ちます。例えば、マウスホバー時に表示される情報を、タッチデバイスではタップ時に表示させたり、常に表示させたりするなど、デバイスの入力特性に合わせてスタイルを最適化することが可能です。これにより、ユーザーはどのような環境からでも快適にウェブサイトを利用できるようになります。このメディア特性は、デバイスがホバー能力を「持っているか否か」を判定するものであり、現在要素にカーソルがホバーしているかどうかを判定するものではないことにご注意ください。
公式リファレンス: hover
構文(syntax)
1@media (hover: hover) { 2 /* ホバー機能を持つデバイスに適用するスタイル */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません