Jquery hover() over image

Question

I'm trying to make a functionality when a user hovers over an image then an anchor element will appear The user can then click on the anchor tag to follow the link. When the user isn't hovering the image, it disappears.

Making the anchor tag appear when I hover over the image works fine, but when I hover over the anchor tag, it disappears. The reason is because when the anchor element appears, the mouse is no longer hovering over the image directly. Soooo basically, my tactic doesn't work. Could someone suggest a method?

Here's my method below: http://jsfiddle.net/5z4RL/

HTML // I have a div with an unordered list. Each li has an img and an anchor

    <div id="img_container">

         <ul>
            <li>
                <img src="img/first.jpg" width="260px" height="260px">
                <a href="#">Click Here To Visit </a>
            </li>
            <li>
                   <img src="img/second.jpg" width="260px" height="260px">
                <a href="#"> Click Here To Visit </a>
            </li>
            <li>
                <img src="img/third.jpg" width="260px" height="260px">
                <a href="#"> Click Here To Visit </a>
            </li>
        </ul>

    </div>

JQUERY

 $(document).ready(function(){ 
    $("#img_container img").hover(
      function(){
        $(this).next().css("visibility","visible");
       }, function(){
        $(this).next().css("visibility","hidden");
       }

    );

});// end of ready

Answer 1

Just use CSS for something as simple as this:

#img_container li a {
    /* current styles */
    visibility: hidden;
}
#img_container li:hover a {
    visibility: visible;
}

This hides the a elements by default then shows them when you hover over the parent li.

Here it is working: http://jsfiddle.net/sPL73/

If you only want the as to be visible when hovering over the image use this instead:

#img_container li a {
    /* current styles */
    visibility: hidden;
}
#img_container img:hover + a, #img_container li a:hover {
    visibility: visible;
}

This uses CSS3's adjacent sibling selector to select the a next to an image that's being hovered over. Here's a demo: http://jsfiddle.net/4wcQr/

Answer 2

You can just use LI instead:

$("#img_container li").hover(
    function(){
        $(this).find('a').css("visibility","visible");
    }, function(){
        $(this).find('a').css("visibility","hidden");
    }      
);

Answer 3

Bind to the list elements instead of the image. Then fade the anchor tag in and out accordingly:

$(function(){ 
    $("#img_container li").hover(function () {
        $(this).find('a').fadeIn();
    }, function () {
        $(this).find('a').fadeOut();
    });
});

Answer 4

You can attach your hover handler on <li>, as already said, or alternatively attach it to both the <img>and <a>.

This might be useful if you don't want to rely on the boundaries of the <li> element.

Here's a fiddle: http://jsfiddle.net/5z4RL/3/

$(document).ready(function(){ 
    $("#img_container img, #img_container a").hover(
        function(){
            $(this).parent().find("a").css("visibility","visible");
        }, function(){
            $(this).parent().find("a").css("visibility","hidden");
        }

    );

});// end of ready

Answer 5

Assign the event to your LI's instead, and use .mouseenter() and .mouseleave instead of hover(). This way, as long as your cursor is on the element, or any of its children, the event is still active.