0

IE から特定の CSS ルールを非表示にする方法はありますか? < IE9 では動作しない次のコードがあります。そして、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)
            }
        });
    });
}
4

1 に答える 1

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>');
}
于 2013-06-18T14:24:41.127 に答える