Question

我正在尝试在用户将鼠标悬停在图像上时创建一个功能，然后会出现一个锚元素然后用户可以点击锚标记来关注该链接。当用户没有悬停图像时，它会消失。

当我将鼠标悬停在图像上时显示锚标记可以正常工作，但当我将鼠标悬停在锚标记上时，它会消失。原因是当锚元素出现时，鼠标不再直接悬停在图像上。 Soooo基本上，我的策略不起作用。有人可以推荐一种方法吗？

HTML //我的 div 带有无序列表。每个 li 都有 img 和锚

    <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

您可以use LI代替：

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

Answer 2

只需使用CSS即可：

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

默认情况下会隐藏a个元素，然后将鼠标悬停在父级li上时显示这些元素。

这里有效：http://jsfiddle.net/sPL73/

如果您只想在将鼠标悬停在图片上时看到a，请改用：

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

这使用CSS3 adjacent sibling selector来选择正在悬停的图片旁边的a。这是一个演示：http://jsfiddle.net/4wcQr/

Answer 3

绑定到列表元素而不是图像。然后相应地淡入锚标签：

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

Answer 4

如上所述，您可以在hover附加<li>处理程序，或者将其附加到<img>和<a>。

如果您不想依赖<li>元素的边界，这可能很有用。

这是一个小提琴：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

将事件分配给您的LI而不是~~，并使用.mouseenter()和.mouseleave代替hover()。这样，只要您的光标位于元素或其任何子元素上，该事件仍处于活动状态。~~

Jquery悬停（）在图像上方

5 个答案: