Jquery Mouseout dropdown menu

Question

Im trying to fix my mouseout event.

Ive got the element

<div id="dropdown"></div>

to show when Im hovering on it. But I want it to dissapear when theres a mouseout event on the ".page_item.page-item-2" element AND #dropdown element.

Here's my Jquery code (that dosen't fully work)

$(document).ready(function(){
$("#dropdown").css('display', 'none');
$(".page_item.page-item-2").hover(
            function() {
    $("#dropdown").fadeTo("fast", 1.0);

    });
    var s = $(".page_item.page-item-2").mouseout;
    var b = $("#dropdown").mouseout;
    if(s && b){
    $("#dropdown").fadeTo("fast", 0.0);
    }    
});

Im sure theres a simple solution to this. Please help

Your gonna have to provide the HTML your using as well seeing as theres more than just #dropdown in play here. — chris
– chris, Commented Aug 13, 2012 at 16:12
There really not much to it. Just some css to this element <div id="dropdown"></div> — oBo
– oBo, Commented Aug 13, 2012 at 16:13
You could really use fadeIn() and fadeOut() instead of fadeTo — MayThrow
– MayThrow, Commented Aug 13, 2012 at 16:22

Isaac Fife · Accepted Answer · 2012-08-13 16:35:28Z

3

Why would this not work?

$(document).ready(function(){
    $("#dropdown").css('display', 'none');
    $(".page_item.page-item-2").mouseenter(function() {
        $("#dropdown").fadeTo("fast", 1.0);
    });
    $(".page_item.page-item-2").mouseout(function() {
        $("#dropdown").fadeTo("fast", 0.0);
    });
    $("#dropdown").mouseout(function() {
        $("#dropdown").fadeTo("fast", 0.0);
    });
});

EDIT: Because the specification has changed(story of our lives?), here's a rework of my solution. If the relationship between the two elements is simple, like parent-child, this would be super easy...But if they are distant cousins, the below code should still work. I don't like it much...but I think it should work.

var mouseEnterCounter= 0; //allows FadeOuts when equal to zero
$(document).ready(function(){
    $("#dropdown").css('display', 'none');
    $(".page_item.page-item-2").mouseenter(function() {
        mouseEnterCounter++;
        $("#dropdown").fadeTo("fast", 1.0);
    });
    $("#dropdown").mouseenter(function() {
        mouseEnterCounter++;
    });
    $(".page_item.page-item-2").mouseout(function() {
        mouseEnterCounter--;
        if(mouseEnterCounter == 0)
            $("#dropdown").fadeTo("fast", 0.0);
    });
    $("#dropdown").mouseout(function() {
        mouseEnterCounter--;
        if(mouseEnterCounter == 0)
            $("#dropdown").fadeTo("fast", 0.0);
    });
});

edited Aug 13, 2012 at 16:35

answered Aug 13, 2012 at 16:17

Isaac Fife

1,69013 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

oBo Over a year ago

Cus when i leave the .page_item.page-item-2 element the #dropdown element closes. I have to do some if statement that sais when i leave dropdown & .page_item.page-item-2 the #dropdown closes. But im not sure how

Isaac Fife Over a year ago

Ohhhh.

But I want it to dissapear when thers a mouseout event on either the ".page_item.page-item-2" element or #dropdown element.

is not the same as what you just said.

MayThrow Over a year ago

So what you want is to hide fade out the #dropdown when there's a mouseOut event on <strong>both</strong> ".page_item.page-item-2" and #dropdown ?

buergi · Accepted Answer · 2012-08-13 16:50:02Z

1

You could set a timeout in the mouseout event to fade out the element after some time. And reset the timeout everytime a mouseenter event occurs. Here is a full working minimal example.

<div class="page_item page-item-2">Hello</div>
<div id="dropdown">World</div>

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("#dropdown").css('display', 'none');
    function clear_timeout() {
        clearTimeout($("#dropdown").data('timeout'));
        $("#dropdown").fadeIn("fast");
    }
    function set_timeout() {
        var timeout = setTimeout(function(){
            $("#dropdown").fadeOut("fast");
            $("#dropdown").css('display', 'none');
        }, 100);
        $("#dropdown").data('timeout', timeout);
    }
    $(".page_item.page-item-2").mouseenter(clear_timeout);
    $("#dropdown").mouseenter(clear_timeout);
    $(".page_item.page-item-2").mouseout(set_timeout);
    $("#dropdown").mouseout(set_timeout);
    });
</script>

edited Aug 13, 2012 at 16:50

answered Aug 13, 2012 at 16:35

buergi

6,2763 gold badges21 silver badges16 bronze badges

1 Comment

oBo Over a year ago

This solution worked for me! thank you I just needed to remove $("#dropdown").css('display', 'none'); in the timeout variable. otherwise it dissapeard to fast

Collectives™ on Stack Overflow

Jquery Mouseout dropdown menu

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related