隐藏特定的css规则从ie

Question

有没有办法来隐藏从IE的特定css规则？我有以下代码不能与< IE9一起使用。我正在使用modernizer来检测css浏览器的支持。我需要隐藏的div：从< IE9悬停

<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>'); 
}