How to call IE CSS gradient property --> Filter

Question

I have been trying to call filter css method from jquery for IE, but I am aint b able to do so?

What I using ?

    $('.gtob').mouseover(function(){
        $(this).css("background-image","-moz-linear-gradient(100% 100% 90deg, #373737, #000000)");
        $(this).css("background-image","-webkit-gradient(linear, 0% 0%, 0% 100%, from(#373737), to(#000000))");
        $(this).css("filter","progid:DXImageTransform.Microsoft.gradient( startColorstr='#373737', endColorstr='#000000',GradientType=0)");
    });

The first two lines works great for Firefox, Safari and Chrome but the IE statement give no response :(

So, Anyone know how to do it ?

P:S! I have tried -ms-filter Nothing happens

Answer 1

I think gradient has to be capitalized?

  $('.gtob').mouseover(function(){
        $(this).css("background-image","-moz-linear-gradient(100% 100% 90deg, #373737, #000000)");
        $(this).css("background-image","-webkit-gradient(linear, 0% 0%, 0% 100%, from(#373737), to(#000000))");
        $(this).css("filter","progid:DXImageTransform.Microsoft.Gradient( startColorstr='#373737', endColorstr='#000000',GradientType=0)");
    });

Answer 2

I'd suggest that your code would be much cleaner if you moved those styles to a class in your stylesheet, and then do .addClass() and .removeClass() for your mouseover.

You didn't specify which version of IE you're working with, but for what it's worth, filter is for IE6 and IE7, but IE8 requires -ms-filter. The latter also requires you to escape the quote marks in the filter string.

Finally, you may want to check out CSS3Pie, which is a hack for all versions of IE to allow them to support CSS gradients and border-radius in a slightly more standards-compliant manner.