Question

我有一系列缩略图。将鼠标悬停在缩略图上时，缩略图顶部的按钮变为可见。它最初通过visibility属性不可见。

当我鼠标悬停时，它很好，但当我将鼠标移到缩略图顶部的按钮上时，按钮开始闪烁。这是有道理的，因为我将鼠标移出缩略图。我的问题是，当我超过缩略图和按钮时，我怎么能这样做，它不会像我从拇指中躲避。这就是我目前使用的：

$(".adminGalImg").hover(function()
{
    $(this).parent().find(".galImgBtn").css("visibility","visible");
},
function()
{
    $(this).parent().find(".galImgBtn").css("visibility","hidden");
});

Answer 1

使用div作为容器来保存图像和按钮。然后，当您将鼠标悬停在按钮上时，您不会离开正在切换可见性的容器。

<div id="#holder">
    <img class="adminGalImg" src="image source" />
    <button class="galImgButton">Button</button>
</div>


$("#holder").hover(function()
{
    $(this).parent().find(".galImgBtn").css("visibility","visible");
},
function()
{
    $(this).parent().find(".galImgBtn").css("visibility","hidden");
});

Answer 2

在包含图像和按钮的容器上执行悬停/停止功能，而不是图像。例如：

<div class="container" style="background-image: url(1.png)">
    <button></button>
</div>

$(".container).hover(...);

这应该可以正常工作。

按钮在图像顶部，鼠标悬停问题与jquery

2 个答案: