CODEWITHSUNDEEP
jquerybackgroundinternet-explorer-7opacity
Matteo Gilardoni
Matteo Gilardoni

Reputation: 341

Covered effect don't work on ie7

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

Upvotes: 0

Views: 146

Answers (2)

Matteo Gilardoni
Matteo Gilardoni

Reputation: 341

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

Upvotes: 0

arieljuod
arieljuod

Reputation: 15838

IE<=8 doesn't understand the opacity attribute, it uses filters, you should use jquery's fadeTo method that will take care of all browsers

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

edited: using hover instead of mouseover and mouseout

Upvotes: 1

Related Questions