jQuery - Keep another element opened after mouseenter

Question

How do I keep a div from staying after mouseover? For example, I hover over one div, and then the other appears. When I try to hover over the one that has just been uncloaked, it disappears because I'm not ".mouseenter-ing," the original div.

This is my code:

    $(document).ready(function() {
        $(".panel").hide();
        $("body").fadeIn(1800);
        $(".starter").mouseover(function() {
            $(".panel").slideDown(600);
        });
        $(".starter").mouseleave(function() {
         $(".panel").slideUp(600);
            $(".panel").mouseenter(function() { 
                $(".panel").show();
      });
     });
    });

Answer 1

Assuming you want the following:

• Mouse over .starter
• slideDown .panel
• Only when you mouse OUT of .panel, slideUp .panel

You are hiding .panel when you mouse out of .starter, try something like this instead starting on line 7:

$(".panel").mouseleave(function() {
  $(".panel").slideUp(600);

If you want to ensure .panel closes if they move off of .starter you could use a timer to ensure it eventually closes if they don't mouse over .panel in a specified amount of time. In this case, 1 second:

$(".starter").mouseleave(function() {
  $(".panel").data('mouseLeaveTimeout', setTimeout(function() {
    $(".panel").slideUp(600);
  },1000));
});

$(".panel").mouseover(function() {
  clearTimeout($(this).data("mouseLeaveTimeout"));
});

Check out this codepen for an example of what I think you want.