Jquery hover（）在图像上

我正在尝试创建一个功能，当用户将鼠标悬停在图像上时，会出现一个锚元素，用户可以单击锚标记以跟随链接。当用户不悬停图像时，图像将消失

当我将鼠标悬停在图像上方时，使锚定标记显示效果良好，但当我将鼠标悬停在锚定标记上方时，锚定标记消失。原因是当锚元素出现时，鼠标不再直接悬停在图像上。所以基本上，我的策略不起作用。有人能推荐一种方法吗

以下是我的方法：

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>

---

将事件分配给您的LI，并使用

.mouseenter（）

和

.mouseleave

而不是

hover（）

。这样，只要光标位于元素或其任何子元素上，事件仍处于活动状态。

将事件分配给LI，并使用

.mouseenter（）

和

.mouseleave

代替

悬停（）。这样，只要光标位于元素或其任何子元素上，事件仍处于活动状态。
您可以：

你可以改为：

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

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

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

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

如前所述，您可以将您的
悬停处理程序附加到
上，或者将其附加到
和

如前所述，您可以将您的
悬停处理程序附加到
上，或者将其附加到
和

只需将CSS用于如下简单内容：

#img#u集装箱李a{
/*当前样式*/
可见性：隐藏；
}
#img_集装箱李：悬停a{
能见度：可见；
}

默认情况下，这会隐藏
a
元素，然后当您将鼠标悬停在父
li
上时显示它们

这就是它的工作原理：

如果您只想在将鼠标悬停在图像上时看到
a
s，请使用以下选项：

#img#u集装箱李a{
/*当前样式*/
可见性：隐藏；
}
#img_容器img:hover+a，#img_容器li a:hover{
能见度：可见；
}

这使用CSS3选择悬停图像旁边的
a
。这里有一个演示：
只需将CSS用于像这样简单的事情：

#img#u集装箱李a{
/*当前样式*/
可见性：隐藏；
}
#img_集装箱李：悬停a{
能见度：可见；
}

默认情况下，这会隐藏
a
元素，然后当您将鼠标悬停在父
li
上时显示它们

这就是它的工作原理：

如果您只想在将鼠标悬停在图像上时看到
a
s，请使用以下选项：

#img#u集装箱李a{
/*当前样式*/
可见性：隐藏；
}
#img_容器img:hover+a，#img_容器li a:hover{
能见度：可见；
}

这使用CSS3选择悬停图像旁边的
a
。下面是一个演示：
为什么不将鼠标悬停在列表元素上……为什么不将鼠标悬停在列表元素上。。。是mouseenter/mouseleave的缩写，啊，你说得对。因此，这里的关键是事件绑定到的元素，正如其他人所提到的。是mouseenter/mouseleave的缩写，啊，你说得对。正如其他人所提到的，这里的关键是这一事件必然涉及的因素。许多不同的答案。我从他们身上学到了很多。谢谢你们的时间！很多不同的答案。我从他们身上学到了很多。谢谢你们的时间！
$(function(){ 
    $("#img_container li").hover(function () {
        $(this).find('a').fadeIn();
    }, function () {
        $(this).find('a').fadeOut();
    });
});

$(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