从 ie 中隐藏特定的 css 规则答案

【问题标题】：Hiding specific css rules from ie从 ie 中隐藏特定的 css 规则
【发布时间】：2013-06-18 22:24:41
【问题描述】：

有没有办法在 IE 中隐藏特定的 css 规则？我有以下代码不适用于隐藏 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)
            }
        });
    });
}

【问题讨论】：

标签： jquery css cross-browser modernizr

【解决方案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>');
}

【讨论】：