tl; drこれを使用：https : //jsfiddle.net/57tmy8j3/
なぜ、または他にどんなオプションがあるのか興味があるなら、読み進めてください。
Quick'n'dirty-JSを使用してホバースタイルを削除
:hoverJavaScript を使用して含まれているすべてのCSSルールを削除できます。これには、CSSに触れる必要がなく、古いブラウザーと互換性があるという利点があります。
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) { // remove all the :hover stylesheets
try { // prevent exception on browsers not supporting DOM styleSheets properly
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) {}
}
制限：スタイルシートは同じドメインでホストする必要があります（つまり、CDNはありません）。UXを損なう、SurfaceやiPad Proなどの混合マウスとタッチデバイスのホバーを無効にします。
CSSのみ-メディアクエリを使用する
すべての：hoverルールを@mediaブロックに配置します。
@media (hover: hover) {
a:hover { color: blue; }
}
または、ホバールールをすべてオーバーライドします（古いブラウザーと互換性があります）。
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
制限：WebViewを使用する場合、iOS 9.0以降、Chrome for AndroidまたはAndroid 5.0以降でのみ機能します。hover: hover古いブラウザのホバー効果を壊しhover: none、以前に定義されたすべてのCSSルールを上書きする必要があります。どちらも、マウスとタッチの混合デバイスとは互換性がありません。
最も堅牢-JSを介してタッチを検出し、CSS：hoverルールを付加
このメソッドでは、すべてのホバールールの前にを付ける必要がありますbody.hasHover。（または任意のクラス名）
body.hasHover a:hover { color: blue; }
hasHoverクラスを使用して添加することができるhasTouch()最初の例から。
if (!hasTouch()) document.body.className += ' hasHover'
ただし、これには、混合タッチデバイスで前の例と同じ欠点があり、これが究極のソリューションになります。マウスカーソルが移動するたびにホバー効果を有効にし、タッチが検出されるたびにホバー効果を無効にします。
function watchForHover() {
// lastTouchTime is used for ignoring emulated mousemove events
let lastTouchTime = 0
function enableHover() {
if (new Date() - lastTouchTime < 500) return
document.body.classList.add('hasHover')
}
function disableHover() {
document.body.classList.remove('hasHover')
}
function updateLastTouchTime() {
lastTouchTime = new Date()
}
document.addEventListener('touchstart', updateLastTouchTime, true)
document.addEventListener('touchstart', disableHover, true)
document.addEventListener('mousemove', enableHover, true)
enableHover()
}
watchForHover()
これは基本的にどのブラウザでも機能し、必要に応じてホバースタイルを有効または無効にします。
これが完全な例です-モダン：https : //jsfiddle.net/57tmy8j3/
レガシー（古いブラウザで使用）：https : //jsfiddle.net/dkz17jc5/19/