0

我创建了社交网络按钮，其中有一个 javascript 函数，可以创建覆盖 css hover 的灯泡慢点火效果。它工作，但在IE7没有。奇怪的是“IE 调试”不报告错误。您可以在此链接上看到http://www.matteowebdesigner.com/test/yesimove/

代码说明：

<!-- html -->
<div class="social">
    <a href="http://www.facebook.com/yesimove" class="facebook" rel="external">facebook</a>
    <a href="https://twitter.com/yesimove" class="twitter" rel="external">twitter</a>
    <a href="#" class="google" rel="external">google</a>
</div>

一些用于即时悬停效果的 CSS。

    #footer .social .facebook,
    #footer .social .facebook .fade {background-position:-80px -90px;}
    #footer .social .twitter,
    #footer .social .twitter .fade {background-position:-107px -90px;}
    #footer .social .google,
    #footer .social .google .fade{background-position:-134px -90px;}
    /*hover*/
    #footer .social .facebook:hover {background-position:-80px -117px;}
    #footer .social .twitter:hover {background-position:-107px -117px;}
    #footer .social .google:hover {background-position:-134px -117px;}

此代码在a元素上创建两个跨度以覆盖背景和 :hover css。然后在第二个跨度中，它使用适当的opacity:0隐藏，然后使用 onmouseover opacity 将变为 1。

/*= socialOver =*/
function socialOver(){
    var socials = $('#footer .social a');
    $('<span class="fade"></span><span class="fade"></span>').appendTo(socials);
    socials.each(function(i,o){
        var bpx = $(o).css('backgroundPositionX');
        $(o).find('.fade:eq(1)').css({
            backgroundPosition:bpx+' -117px',
            opacity:0
        });
    });
    socials.find('.fade').on('mouseover',function(e){
        $(this).stop(true,true).animate({
            'opacity':'1'
        },300);
    }).on('mouseout',function(e){
        $(this).stop(true,true).animate({
            'opacity':'0'
        },600);
    });
};
4

2 回答 2

1

IE<=8 不理解 opacity 属性，它使用过滤器，你应该使用 jquery 的 fadeTo 方法来处理所有浏览器

socials.find('.fade').hover(function(){
    $(this).stop().fadeTo(300,1);
  }), function(){
    $(this).stop().fadeTo(600,0);
  }
);

编辑：使用 hover 而不是 mouseover 和 mouseout

于 2012-07-30T13:18:43.030 回答
0

ie7 中的问题是，如果锚元素内部的元素设置为适当的位置：绝对，它们是不可见的，但如果使用位置：相对，您可以看到 javascritp 代码工作。所以对于 ie7 我使用了 ie7 hack *:first-child+html来为 ie7 创建一个不同的 css

/*Css*/
*:first-child+html #footer .social a .base {position:relative;top:-27px;cursor:pointer;} /*IE7 Hack*/
*:first-child+html #footer .social a .fade {position:relative;top:-54px;cursor:pointer;} /*IE7 Hack*/

然后我修改了 javascript，现在代码正在创建一个两个元素 span.base 和 span.fade

/*= socialOver =*/
function socialOver(){
    var socials = $('#footer .social a');
    $('<span class="base"></span><span class="fade"></span>').appendTo(socials);
    socials.each(function(i,o){
        var bpx = $(o).css('backgroundPositionX');
        $(o).find('.fade').css({
            backgroundPosition:bpx+' -117px'
        }).fadeTo(0,0);
    });
    socials.find('.fade').hover(function(){
        $(this).stop().fadeTo(300,1);
    },function(){
        $(this).stop().fadeTo(600,0);
    });
};
于 2012-08-04T12:58:21.233 回答