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

Question

以下是我在此页面上使用的代码： 此处

$(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

AFAIK，没有办法解决 IE 的问题，至少在你的情况下是这样。
Internet Explorer 不能很好地处理 javascript/jQuery 不透明度更改（通常是 Alpha 混合、show()；包括函数），尤其是在使用（半）透明图像时。
IE 无法掌握 alpha 混合元素的淡入淡出。

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

祝你好运。

Answer 2

这与透明 png 无关。我有类似的问题。只需在过渡之前在元素上设置背景颜色（您可以在过渡之后立即将其删除）。

$(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 3

你也使用半透明PNG吗？这让事情变得更加复杂。我将其更改为 + 图标的 gif 和淡入淡出的“框”的背景颜色。先尝试一下，然后再尝试用 PNG 解决它。我也遇到过同样的问题，不过如果你一步一步来的话，会更容易解决。

Answer 4

IE 不太支持 CSS 不透明度。使用以下代码使不透明度在 IE 中工作：

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

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

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

此外，您可能需要考虑每个元素只运行 bling 一次，这将加快 jQuery 处理速度：
例如：

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

ID 选择总是最快的，其次是标签名称（a、ul、div）。 CSS 类选择速度较慢。

Answer 5

我认为你正在使用透明的 png 图像。这不是一个不透明的问题。你必须使用 alpha imageloader for ie，它才能工作。如果你的图像被设置为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解决方案即时修复pngfix与javascript，http://www.dillerdesign.com/experiment/DD_belatedPNG/

DD_belatedPNG.fixPng('.rollover');