jQuery hover effect uses opacity, which IE doesn't support

Below is my code for use on this page: here

$(document).ready(function(){
$('.jcarousel-skin-tango a').hover(
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 1);

        },
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 0);

        }
    )
});

The problem lies within IE 8 and below. When you hover over any of the slide images, the hover turns to black (because IE doesn't support 'opacity'). I basically need a new way of writing this so the same effect is achieved开发者_StackOverflow without a grey/black box appearing in IE. Any ideas ?

IE does not support the CSS opacity very well. Use the following to make opacity work in IE:

This code allows you to (for example) set all images with the class: foo to use opacity: 50.

$('img.foo').css("-ms-filter", "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)");

You may try initializing the element with visibility:hidden; and then making it visible and fade when it's activated. The jQuery fade effect will work with the browser that supports it and just display the element if fade isn't properly supported.

Additionally, you might want to consider only running bling once per element, this will speed up the jQuery processing: e.g.:

var $el = $(this);
var $rollover = $el.find('.rollover'),
    $captions = $el.find('.captions');

ID selections are always fastest, followed by tag names (a, ul, div). CSS class selections are slower.

i think you are using transparent png images. it is not an opacity issue. you must use alpha imageloader for ie, it will work. if your image is set as background from css, the hack would be below

.rollover {
    background: url(/image_path.png) no-repeat 0 0;
    /* IE hack, targets ie only */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/image_path.png", sizingMethod="crop");  
}

or you can use a javascript solution for pngfix on the fly with javascript, http://www.dillerdesign.com/experiment/DD_belatedPNG/

DD_belatedPNG.fixPng('.rollover');

AFAIK, there is no way to deal with IE's problem, at least not in your case. Internet Explorer doesn't play well with javascript/jQuery opacity changes (alpha blending generally, show(); function included), especially when using (semi)transparent images. IE can't grasp fading of an alpha-blended element.

My suggestion: use slideDown/slideUp/other functions, or .animate on element properties to get the closest effect without using alpha blending.

good luck.

This is not about transparent pngs. I had a similar problem. Just set a background-color on the element right before the transition (and you can remove it right after).

$(document).ready(function(){
 $('.jcarousel-skin-tango a').hover(
         function() {
             $(this).find('.rollover').stop().addClass('transition').fadeIn(500, function(){
                  $(this).removeClass('transition');
             });
         },
         function() {
             $(this).find('.rollover').stop().addClass('transition').fadeOut(500, function(){
                  $(this).removeClass('transition');
             });
         }
     )
 });

On your stylesheet:

.transition { background-color: #b1ab1a /* the nearest color of the parent background */

Are you using a semi-transparent PNG as well? That further complicates things. I'd change that to a gif for the + icon and just a background-color for the "box" that fades in and out. Try that first, then try to solve it with a PNG later. I've had the same problem, but it's easier to solve if you go at it step by step.