パソコン表示とスマホ表示、それぞれに適切なホバー効果を実装するためのいろいろ。
目次
デバイスがホバー操作をサポートしているかで切り分ける
従来の画面幅でデバイスを判別する方法（例: max-width:768px）では、当てはまらないデバイスがある（ホバーをサポートしてるスマホがあったりする）ので、ホバー操作をサポートしているかどうかで切り分ける。
ホバー操作をサポートしているか判別するメディア特性一覧
| メディア特性 | 値 | 説明 |
|---|---|---|
hover | hover | デバイスがホバー操作をサポートしている場合に適用される（マウスやペンなど）。 |
none | デバイスがホバー操作をサポートしていない場合に適用される（タッチスクリーンなど）。 | |
any-hover | hover | 1つ以上の入力デバイスがホバー操作をサポートしている場合に適用される（マルチ入力デバイス環境向け）。 |
none | すべての入力デバイスがホバー操作をサポートしていない場合に適用される。 | |
pointer | fine | デバイスが「精細なポインターデバイス」（マウスやタッチペンなど）である場合に適用される。 |
coarse | デバイスが「粗いポインターデバイス」（指などのタッチ入力）である場合に適用される。 | |
none | デバイスにポインターが存在しない場合に適用される（表示専用デバイスなど）。 | |
any-pointer | fine | 1つ以上の入力デバイスが精細なポインターデバイスの場合に適用される。 |
coarse | 1つ以上の入力デバイスが粗いポインターデバイスの場合に適用される。 | |
none | すべての入力デバイスにポインターデバイスが存在しない場合に適用される。 |
タッチデバイスには擬似クラスactiveでホバー効果を実装
擬似クラスactiveで、要素が押されている（クリック中、タップ中）状態の挙動を設定できる。
:activeが機能しないブラウザ対策
iOS Safariなどで、デフォルトの:activeが機能しないケースがあるので、ontouchstartを使用する。
javascriptで対応する場合
1行いれるだけですべての:activeスタイルが有効になる。
document.addEventListener('touchstart', function() {}, true);HTMLの要素にontouchstart属性を追加する場合
ontouchstartを多用すると動作が重くなるから<body ontouchstart>ってしたいとこだけど、全体に適用しちゃうと、想定外の動作をするところができちゃう可能性もあるから、必要な箇所だけに追加する。
<button ontouchstart>ボタン</button>実装例
色々組み合わせれば、各デバイスにそれぞれ最適な効果を適用できるけど、パフォーマンスが悪くなるので必要最低限にするのがいいと思う。
DEMO
HTML
<button class="button">クリック or タップ</button>CSS
.button {
font-size: 1.5em;
font-weight: 700;
border-radius: 8px;
background-color: #007bff;
color: #fff;
transition: background-color 0.3s;
}
/* マウスデバイス向けのホバー効果 */
@media (any-hover: hover) {
.button:hover {
background-color: #0056b3;
}
}
/* タッチデバイス向けのタップ効果 */
@media (any-hover: none) {
.button:active {
background-color: #0056b3;
}
}
/* 高精度なポインターのデバイス向け */
@media (any-pointer: fine) {
.button {
padding: 0.5em;
}
}
/* 指など低精度ポインターのデバイス向け */
/* paddingを広げてタップしやすく */
@media (any-pointer: coarse) {
.button {
padding: 1.5em;
}
}
コメント