Question

I have a tag that appears on an image when the mouse enters the image. When I want to go on the link with the mouse the link logically disappears because i used .mouseleave() function to hide the link when the mouse leaves the image.

I thought to do a conditional test for the .mouseleave() as follow:

if(!$("#linkId").mouseenter()){
//...
}

I tried with .not().mousenter() instead of ! not

But it does not work.. When I enter on the link, it stays and it it never leaves…

Thank you

Sam

Answer 1

Put both, the link and the image in a container and assign the event handler to the container instead. You can position the link with CSS.

As the link and the image are children of the parent, the mouseleave event is not triggered when you hover over the link.

Example:

HTML:

<div id="parent">
    <div id="image"></div> <!-- the div is just an example -->
    <a id="link" href="#">Some link</a>
</div>

CSS:

#parent {
    position: relative;
}

/* used div for demo only */
#image {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#link {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

JavaScript:

$('#parent').hover(function() {
    $('#link').toggle();
});

DEMO

---

$("#linkId").mouseenter() is not doing what you think it does. It does not test whether the mouse is over the link or not, it generates a mouseenter event on the link.