CODEWITHSUNDEEP
jquerycsscross-browsermodernizr
It worked yesterday.
It worked yesterday.

Reputation: 4617

Hiding specific css rules from ie

Is there a way to hide specific css rules from IE? I have following code which does not work with < IE9. And i am using modernizer to detect css browser support. I need to hide div:hover from < IE9 

<div></div>

css

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

div:hover {
    background: green;
}

And also i have jquery code for older versions of IE

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

Upvotes: 0

Views: 66

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You could do it without setting it directly in your 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>');
}

Upvotes: 1

Related Questions