CSS で :hover や :focus のスタイルを定義した時、iOS 環境では <body ontouchstart=""> と書かないと有効にならない。
HTML を書き換えず、window.ontouchstart = function() {}; など JavaScript だけで有効にはできないか検証してみる。
| 条件 | a 要素 |
button 要素 |
|---|---|---|
:hover のみ指定・通常 |
ダミーリンク | |
:hover のみ指定・セレクト禁止 |
ダミーリンク | |
:focus のみ指定・通常 |
ダミーリンク | |
:focus のみ指定・セレクト禁止 |
ダミーリンク | |
:active のみ指定・通常 |
ダミーリンク | |
:active のみ指定・セレクト禁止 |
ダミーリンク | |
:hover・:focus 指定・通常 |
ダミーリンク | |
:hover・:focus 指定・セレクト禁止 |
ダミーリンク | |
:focus・:active 指定・通常 |
ダミーリンク | |
:focus・:active 指定・セレクト禁止 |
ダミーリンク | |
:hover・:active 指定・通常 |
ダミーリンク | |
:hover・:active 指定・セレクト禁止 |
ダミーリンク | |
:hover・:focus・:active 指定・通常 |
ダミーリンク | |
:hover・:focus・:active 指定・セレクト禁止 |
ダミーリンク |
| 処理 | 実行 | 状況 |
|---|---|---|
window.ontouchstart = function() {}; |
未実行 | |
window.addEventListener('touchstart', function() {}, true); |
未実行 | |
window.addEventListener('touchstart', function() {}, false); |
未実行 | |
document.ontouchstart = function() {}; |
未実行 | |
document.addEventListener('touchstart', function() {}, true); |
未実行 | |
document.addEventListener('touchstart', function() {}, false); |
未実行 | |
document.body.ontouchstart = function() {}; |
未実行 | |
document.body.addEventListener('touchstart', function() {}, true); |
未実行 | |
document.body.addEventListener('touchstart', function() {}, false); |
未実行 |
試した限りだと、上のどの方法でも :hover や :active を有効にできた。:focus に関しては TouchStart イベントの有無に関わらず有効にならなかった。
現状 iOS Safari は -webkit-user-select とベンダプレフィックスが必要。対象の要素か、それを内包する親要素に指定してあれば範囲選択にはならなくなる。
ちなみに、リンクやボタン要素、もしくはそれを内包する親要素に pointer-events: none; を当てると、Hover もタップ操作も効かなくなる。
あと、-webkit-tap-highlight-color を透明に指定している。rgba(0, 0, 0, 0) としたが、最近のブラウザなら transparent でも大丈夫かも。この辺は Android 環境や少し古いブラウザのことを考えて設定。