スマホやタブレット等のタッチデバイスでは、リンクやボタンに指定した:hoverのスタイルが邪魔になるケースがあります。というか、タッチデバイスでは:hoverの挙動は不要ですよね。
タッチデバイスでのみ、一括して:hoverのスタイルを無効化する方法が、125naroomさんのブログで書かれていたのでご紹介したいと思います。
JavaScriptを使った方法ですが、このやり方だとコピペするだけで:hoverを一括無効化できて非常に便利です。
CSSでスマホとタブレットでの:hoverの挙動を無効化する
例えば、以下のようなスタイルを指定していたとします。
a {
background: #696969;
color: #fff;
}
a:hover {
background: #fff;
color: #696969;
}:hoverのスタイルをCSSで無効化する場合、以下のように:hoverの内容を打ち消すスタイルを記述する必要があります。
@media screen and (max-width: 768px) {
a:hover {
background: #696969;
color: #fff;
}
}これだと少々面倒ですね。
JavaScriptでスマホとタブレットでの:hoverの挙動を無効化する
ようやく本題ですが、JavaScriptを使って、スマホ・タブレットで:hoverの挙動を無効化させる方法です。
125naroomさんのブログで紹介されていた方法は以下の通りです。このJavaScriptをコピペするだけで、スマホやタブレットでは:hoverのスタイルが効かなくなります。
<script>
var touch = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
if(touch) {
try {
for (var si in document.styleSheets) {
var styleSheet = document.styleSheets[si];
if (!styleSheet.rules) continue;
for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
if (!styleSheet.rules[ri].selectorText) continue;
if (styleSheet.rules[ri].selectorText.match(':hover')) {
styleSheet.deleteRule(ri);
}
}
}
} catch (ex) {}
}
</script>タッチデバイスを判別して、deleteRuleで:hoverの付いたスタイルを削除しています。
あとがき
コピペするだけでOKですが、もっと細かく条件を指定したい場合は、以下の部分で判定内容を変更しましょう。
var touch = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;スマホやタブレットで:hoverのスタイルを無効化したい場合は、ぜひお試しください。