CODEWITHSUNDEEP
jqueryhoverhideshow
wcodavid
wcodavid

Reputation: 127

hover effect doesn't work

$(function () {
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop != 0)
            $('#header').hide();
        else    
            $('#header').show();
    });
    $('#header').hover(
        function (e) {
            var scrollTop = $(window).scrollTop();
            if (scrollTop != 0) {
                $('#header').show();
            }
        },
        function (e) {
            var scrollTop = $(window).scrollTop();
            if (scrollTop != 0) {
                $('#header').hide();
            }
        }
    );
});

Depend on scrolling, it works well. But with mouseover, it's not working especially in IE7. :(

Is it wrong?

Upvotes: 0

Views: 171

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

Once you hide your fixed HEADER, (supposing you're doing it right: fixed) there's no way you can recall the mouseenter on that element cause it's not stack any more in it's original space.

You better handle the element's opacity. Here's an example using jQuery's .fadeTo()

http://jsbin.com/eviziq/3/edit

$(window).scroll(function(){
    $('#header').stop().fadeTo(300, $(window).scrollTop() > 0 ? 0.1 : 1 );
});

$('#header').on('mouseenter mouseleave', function( e ){
    if( $(window).scrollTop() > 0 ) {
        $('#header').stop().fadeTo(300, e.type=="mouseenter" ? 1 : 0.1 );
    }
});

I used Opacity 0.1 instead of 0 just for demo purpose.

Upvotes: 1

Related Questions