Question

我创建了社交网络按钮，其中有一个javascript函数，可以创建灯泡慢点火的效果，覆盖了css悬停。它有效，但在 IE7 没有。奇怪的是'IE debug'不报告错误。您可以在此链接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 元素上创建了两个 span ，用于覆盖背景和：hover css。然后在第二个 span 中，隐藏了适当的不透明度：0 然后使用onmouseover不透明度将变为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);
    });
};

Answer 1

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

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

编辑：使用悬停而不是鼠标悬停和鼠标移动

Answer 2

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

覆盖效果不适用于ie7

2 个答案: