Question

以下是我在此页面上使用的代码：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);

        }
    )
});

问题在于IE 8及以下版本。当您将鼠标悬停在任何幻灯片图像上时，悬停会变为黑色（因为IE不支持“不透明度”）。我基本上需要一种新的编写方式，以便在IE中没有灰色/黑色框的情况下实现相同的效果。有什么想法吗？

Answer 1

IE不支持CSS不透明度。使用以下命令在IE中使不透明度工作：

此代码允许您（例如）使用类foo设置所有图像以使用不透明度：50。

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

您可以尝试使用visibility:hidden;初始化元素，然后使其可见并在激活时淡出。 jQuery淡入淡出效果将与支持它的浏览器一起使用，如果没有正确支持淡入淡出则只显示该元素。

此外，您可能想要考虑每个元素只运行一次bling，这将加速jQuery处理： e.g：

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

ID选择始终最快，后跟标签名称（a，ul，div）。 CSS类选择较慢。

Answer 2

我认为你正在使用透明的png图像。这不是一个不透明的问题。你必须使用alpha imageloader，即它会工作。如果你的图像被设置为css的背景，那么黑客将在

之下

.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");  
}

或者您可以使用javascript http://www.dillerdesign.com/experiment/DD_belatedPNG/

动态地使用javascript解决方案进行pngfix

DD_belatedPNG.fixPng('.rollover');

Answer 3

AFAIK，没有办法处理IE的问题，至少在你的情况下是这样。 Internet Explorer与javascript / jQuery不透明度更改（通常为alpha混合，show（）;包含的函数），尤其在使用（半）透明图像时不能很好地兼容。 IE无法掌握α混合元素的褪色。

我的建议：使用slideDown / slideUp /其他函数或.animate元素属性来获得最接近的效果而不使用alpha混合。

祝你好运。

Answer 4

这不是透明的pngs。我遇到了类似的问题。只需在转换之前在元素上设置背景颜色（您可以在之后立即将其删除）。

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

在样式表上：

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

Answer 5

你也在使用半透明的PNG吗？这进一步使事情复杂化。我将其更改为+图标的gif，并将其更改为淡入淡出的“框”的背景颜色。首先尝试，然后尝试使用PNG解决它。我遇到了同样的问题，但是如果你一步一步地解决它会更容易解决。

jQuery悬停效果使用IE不支持的不透明度

5 个答案: