タッチデバイスでhoverを無効化（:hoverセレクタ削除）

JavaScript

タッチデバイスの時は、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は書かなかったことになる。