涵蓋的效果不工作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

回答

相關問題