CODEWITHSUNDEEP
jquery
vibskov
vibskov

Reputation: 275

Hover mouseout to list or not

I tried to make hover on .logo then .nav_b be slideDown/slideUp, and if mouse continue move to .nav_b then it will still visible.

These code works fine but when mouse move from .logo to .nav_b it will fire the statement .logo mouseout .
How to set a flag or.. to invoke mouse moveout from .logo to .nav_b or not? any suggestion? Thanks!

http://jsfiddle.net/6URAb/

$('.logo').hover(function(){
    $('.nav_b').stop(true, true).slideDown({duration: 200, queue: false});
},function(){
    $('.nav_b').stop(true, true).slideUp({duration: 200, queue: false});
});

$('.nav_b').hover(function(){
    $('.nav_b').stop(true, true).show();
},function(){
    $('.nav_b').stop(true, true).slideUp({duration: 200, queue: false});
});

Upvotes: 1

Views: 51

Answers (1)

Sushanth --
Sushanth --

Reputation: 55740

The simplest approach would be to change your Markup and attaching the hover event to the .head element Javascript

$(function () {

    $('.head').hover(function () {
        $('.nav_b').stop(true, true).slideDown({
            duration: 200,
            queue: false
        });
    }, function () {
        $('.nav_b').stop(true, true).slideUp({
            duration: 200,
            queue: false
        });
    });
});

HTML

<div class="head">
    <div class="logo">logo</div>
    <div class="nav_b">
        <div class="search">search</div>
    </div>
</div>

Check Fiddle

EDIT

With the same marup if you want to achieve it , then you would be needing to use a combination of setTimeout and cleartimeout. Something like this

$(function () {
    var TIME_OUT;
    $('.logo').hover(function () {
        if (TIME_OUT) clearTimeout(TIME_OUT);
        $('.nav_b').stop(true, true).slideDown({
            duration: 200,
            queue: false
        });
    }, function () {
        $('.nav_b').stop(true, true).slideUp({
            duration: 200,
            queue: false
        });
    });

    $('.nav_b').hover(function () {
        $('.nav_b').stop(true, true).show();
    }, function () {
        TIME_OUT = setTimeout(function () {
            $('.nav_b').stop(true, true).slideUp({
                duration: 200,
                queue: false
            });
        }, 250);
    });
});

Updated Fiddle

Upvotes: 1

Related Questions