show hidden div when element is moused over and keep displayed until mouse leaves either element

Question

This should be really simple, but I am new at this and I think I am overthinking things. I want to reveal an element when another element is hovered over, and keep it displayed if the user is moused over either one.

Here is what I'm starting with, and I have tried to write an if statement to say if element is showing and hovered over, keep it displayed, but it didn't change the behavior you see in this fiddle.

In the example, I want the "i am a link" text to stay there if the user moves their mouse to try to click on it. I have found other posts on SO like this one but haven't been able to apply their answers to solve my question.

If you look at this page, and hover over a shoe, you can see the exact effect I'm trying to achieve. The product info is revealed and you can move your mouse to click on it.

$("#caribbean-info").mouseenter(function () {
    $('#example3-link1').slideDown(400);
}).mouseleave(function () {
    $('#example3-link1').slideUp(400);
});

I also tried to do something like this, which doesn't work:

$("#caribbean-info").mouseenter(function () {
    $('#example3-link1').slideDown(400).hover(function () {
        $('#example3-link1').show();
    }).mouseleave(function () {
        $('#example3-link1').hide();
    });
}).mouseleave(function () {
    $('#example3-link1').slideUp(400);
});

Please show me the light!

Answer 1

If you wrap both the div and the link in a container then you can simply apply the mouseenter and mouseleave events to that...

jsfiddle link

HTML

<div id="container">
    <div id="caribbean-info"></div>
    <a href="#test" id="example3-link1">I am a link - click here.</a>
</div>

Javascript

$("#container").mouseenter(function() {
    $("#example3-link1").slideDown();
});
$("#container").mouseleave(function() {
    $("#example3-link1").slideUp();
});

CSS

I also made a slight change to the css so that the link would only show when you hovered above the visible part of #caribbean-info. I just set display to inline-block:

#caribbean-info{
    height: 100px;
    width: 300px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #ccc;
    position: relative;
}