タッチデバイスの時は、CSSセレクタで「:hover」を持つルールを削除する。
addEventListener('DOMContentLoaded', function(){
if( isTouchDevice() ){
for( var i in document.styleSheets ) if( document.styleSheets.hasOwnProperty(i) ){
deleteRuleHover(document.styleSheets[i]);
}
}
function isTouchDevice() {
return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints || navigator.msMaxTouchPoints;
}
function deleteRuleHover( styleSheet ){
try{
var rules = styleSheet.cssRules || styleSheet.rules;
if( rules ){
for( var i=rules.length; i--; ){
var text = rules[i].selectorText;
if( /:hover/.test(text) ){
//console.log(text);
styleSheet.deleteRule(i);
}
}
for( var i=rules.length; i--; ) deleteRuleHover(rules[i]);
}
}
catch(ex){
//console.log(ex);
}
}
});
※:hoverと:hoverでないセレクタをカンマ区切りで複数ならべると、ぜんぶ削除されてしまうので注意
a, a:hover {
color: #f00;
}
↑このCSSは書かなかったことになる。