Jan. 16th,2019
＃
“hover”メディア・フィーチャーについて
| 値 | キーワード値(“none”、“hover”) |
| タイプ | 離散型 |
“hover”メディア・フィーチャーは文書が出力されるデバイスの入力メカニズムが要素にホバーできるかどうかを表すメディア・フィーチャーです。
デバイスに複数の入力メカニズムがある場合には“hover”メディア・フィーチャーはメインの入力メカニズムのみを対象とします。どの入力メカニズムがメインの入力メカニズムとなるかはユーザー・エージェントによって判断されます。
マウスのようにポインターをクリックせずに要素の上にかざすことができる入力メカニズムはホバーできるデバイス(“hover”)となります。一方でタッチ・スクリーンやスタイラス・ペンなどのまったくホバーできない入力メカニズムやスマートフォンのタッチ・スクリーンのようにロング・タップによってホバーできるものの不便な操作とみなされるデバイスはホバーできないデバイス(“none”)となります。
ユーザー・エージェントはアクセシビリティの理由から、ホバーすることができるデバイスでも“none”として扱うことができます。
入力メカニズムごとの当てはまるの値の例
以下は“pointer”メディア・フィーチャーと“hover”メディア・フィーチャーの値ごとの当てはまる入力メカニズムの例です。
| “pointer: | “pointer: | “pointer: | |
|---|---|---|---|
| “hover: | キーボード入力のみのデバイス | スマートフォンのタッチ・スクリーン | ペン・タブレット |
| “hover: | *** | モーション・コントローラー | マウス、タッチ・パッド |
＃
＃
サンプルコード
@media all and (hover: none) {
p.sample {
background-color: #aa4c8f; /*■*/
text-decoration: underline dotted;
}
}
@media all and (hover: hover) {
p.sample {
background-color: #595857; /*■*/
text-decoration: underline dashed;
}
}
<p class="sample">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
