あ、:hoverが残ってる。
そんなときの記述。
問題点は、iPad Proのような大きなタブレットは悩むところだったりしますが。
CSS サンプル
iPad Pro横向きサイズの「1367px」以上を指定。
PCの画面を縮めたときが問題ではあるが困ったときには使いやすい。
JSで作るのもありだが少々手間だなと思うときに是非。
@media screen and (min-width: 1367px) {
a:hover {
opacity: 0.7;
}
}
JavaScrip サンプル
JSだったら。ただしこれだとタッチデバイス（スマホやタブレット）では全てのhoverが解除されてしまう。
var touch = 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
if (touch) { // remove all :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) {}
}
