jquery - 从 ie 中隐藏特定的 css 规则

Question

有没有办法从 IE中隐藏特定的 css 规则？我有以下代码不适用于< IE9。我正在使用 Modernizer 来检测 CSS 浏览器支持。我需要从 < IE9 隐藏 div:hover

<div></div> 

css

div {
    width: 100px;
    height: 100px;  
    background: red;
    transition: all 0.5s ease-in-out;
}

div:hover {
    background: green;
}

而且我还有旧版本 IE 的 jquery 代码

if (!Modernizr.csstransitions) {
    $(document).ready(function() {
        $(div).on({
            mouseenter : function() {
                $(this).animate({
                    backgroundColor : 'green'
                }, 1000)
            },
            mouseleave : function() {
                $(this).animate({
                    backgroundColor : 'red'
                }, 1000)
            }
        });
    });
}

Answer 1

你可以不直接在你的 CSS 中设置它：

if (!Modernizr.csstransitions) {
    $(document).ready(function() {
        $(div).on({
            mouseenter : function() {
                $(this).animate({
                    backgroundColor : 'green'
                }, 1000)
            },
            mouseleave : function() {
                $(this).animate({
                    backgroundColor : 'red'
                }, 1000)
            }
        });
    });
}
else {  //for browsers which support CSS transition
     $('head').append('<style>div:hover {/*CSS code here*/}</style>');
}