Question

I created of social network buttons where there is a javascript function that create an effect of light bulb slow ignition that covered the css hover. It work, but on IE7 no. The weird thing is that ‘IE debug’ don’t report errors. You can see on this link http://www.matteowebdesigner.com/test/yesimove/

Code explanation:

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

some Css for instant hover effect.

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

This code create two span on the a element for covered the background and the :hover css. Then in the second span it is hidden with the propriety opacity:0 then with onmouseover opacity will became 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

The problem in ie7 is that the element inside the anchor element if they were set with the propriety position:absolute they aren’t visible but if use the position:relative you caould see that javascritp code work. So for ie7 I used the ie7 hack *:first-child+html for create a different css only for 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*/

Then I chaged the javascript, Now the code is creating a two element span.base and 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);
    });
};