Question

我不太确定发生了什么，我想要完成的效果是在Firefox中工作但不是Internet Explorer 8.

以下是网页：http://www.naitsa.ca/aspnet/YearEndShow.aspx

检查标题（右侧）中的顶部3个链接，当您将鼠标悬停在它们上方时，其中有聚光灯淡入和淡出。

看来淡出效果正常但图形显示错误。这是一个透明的png。

这是JQuery：

$(document).ready(function() {
    $(".B1").hover(
        function() {
            $(this).stop(true, true).fadeTo(500, 1.00);
        },
        function() {
            $(this).stop(true, true).fadeTo(500, 0.00);
        }
    );

    $(".B2").hover(
        function() {
            $(this).stop(true, true).fadeTo(500, 1.00);
        },
        function() {
            $(this).stop(true, true).fadeTo(500, 0.00);
        }
    );


    $(".B3").hover(
        function() {
            $(this).stop(true, true).fadeTo(500, 1.00);
        },
        function() {
            $(this).stop(true, true).fadeTo(500, 0.00);
        }
    );

});

这是CSS：

.B1 {
    background:Transparent url(App_Themes/BlueGrey/Images/YearEndShow/Buttons-light-and-shadow.png) no-repeat;
    opacity: 0.0;
    filter: alpha(opacity = 0);
}

.B2 {
    background:Transparent url(App_Themes/BlueGrey/Images/YearEndShow/Buttons-light-and-shadow.png) no-repeat;
    opacity: 0.0;
    filter: alpha(opacity = 0);
}

.B3 {
    background:Transparent url(App_Themes/BlueGrey/Images/YearEndShow/Buttons-light-and-shadow.png) no-repeat;
    opacity: 0.0;
    filter: alpha(opacity = 0);
}

这是HTML：

<table style="width:600px; position:relative; top:-2px;">
    <tr>
        <td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-yearendshow-info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B3"><a href="YearEndShow.aspx" style="width:200px; height:120px; display:block;"></a></div></td>
        <td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-Artist-Info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B2"><a href="YearEndShowArtists.aspx" style="width:200px; height:120px; display:block;"></a></div></td>
        <td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-Event-Info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B1"><a href="YearEndShowInfo.aspx" style="width:200px; height:120px; display:block;"></a></div></td>            
    </tr>
</table>

为什么图形出现如此奇怪的任何想法？

谢谢！

Answer 1

我没有ie8检查你所遇到的问题，但听起来与我最近的问题类似 - 请使用自定义淡入/淡出功能检查此链接http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/。

这与ie的过滤器问题有关 - 使用此插件创建自定义函数：

$(".B1").hover(
    function() {
        $(this).stop(true, true).customFadeIn();
    },
    function() {
        $(this).stop(true, true).customFadeOut();
    }
);

应该工作。

Answer 2

我过去使用hover()使用IE8和透明PNG图像取得了更大的成功。我在IE8和Chrome 11中制作了一个适合我的演示 - http://jsfiddle.net/Ym8jL/1/

我移动了你的CSS和HTML并删除了复制，以便更容易演示。

jQuery fadeTo效果在IE 8中是错误的

2 个答案: