涵盖的效果不工作ie7

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

代码解释：

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

该代码在创建两个跨度用于覆盖的背景和一个元件：悬停的CSS。然后在第二跨度它隐藏与礼不透明度：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); 
    }); 
};

来源

2012-07-30 Matteo Gilardoni

我发现在页面顶部添加<！DOCTYPE html>使得它更有可能在IE中正确显示CSS。 – Matthias 2012-07-30 13:12:01

为什么你自己动画不透明而不是使用jQuery的'fadeIn'方法？ – Blazemonger 2012-07-30 13:12:32

但我的doctype是identic，它是<！DOCTYPE html>。 – 2012-07-30 13:14:18

问题在ie7中是锚元素中的元素，如果它们被设置为适当的位置：绝对它们不可见，但如果使用该位置：相对你可以看到javascritp代码工作。因此，对于IE7我用IE7破解*：第一胎+ HTML只针对IE7

/*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*/

然后我chaged的JavaScript，现在的代码创建两个元素的span.base创建一个不同的CSS和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-04 12:58:21

IE < = 8不理解的不透明度属性，它使用的过滤器，应该使用jQuery的fadeTo方法，将采取所有浏览器

照顾

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

编辑：使用悬停，而不是鼠标悬停及移出

来源

2012-07-30 13:18:43 arieljuod

我用fadeTo改变了不透明度，但结果没有改变。 http://jsfiddle.net/MatteoWebDesigner/LqXzt/ – 2012-07-30 13:58:52

是mouseover和mouseout事件触发吗？使用IE调试器来检查，也许这是另一个问题，jQuery有这个悬停（函数，函数）方法绑定mousehover效果，我会更新我的答案 – arieljuod 2012-07-30 14:19:04

对不起，我没有意识到，有一个事件悬停，我离开了mousover和mouseout。现在我正在更改代码，并且我看到IE7上的代码创建了元素* span *，但它没有执行淡入淡出。也许这是一个Css问题，我认为这是因为IE浏览器找不到错误。 http://jsfiddle.net/MatteoWebDesigner/LqXzt/ http://www.matteowebdesigner.com/test/yesimove/ – 2012-07-30 14:51:38

涵盖的效果不工作ie7

回答

相关问题