0

css hoverをカバーする電球の遅い点火の効果を作成する JavaScript 関数があるソーシャル ネットワーク ボタンを作成しました。それは動作しますが、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;}

このコードは、背景と :hover css をカバーするためにa要素に 2 つのスパンを作成します。次に、2 番目のスパンでは、適切な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);
  }
);

編集: マウスオーバーとマウスアウトの代わりにホバーを使用する

于 2012-07-30T13:18:43.030 に答える
0

ie7 の問題は、適切な position:absolute で設定されている場合、アンカー要素内の要素は表示されませんが、position:relative を使用すると、javascritp コードが機能することがわかります。したがって、ie7の場合、ie7ハック*: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 の 2 つの要素を作成しています。

/*= 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 に答える