悬停时特定于 jquery 的显示按钮

2022-01-22 00:00:00 hover jquery javascript

我有一个应用程序通过循环创建一堆 div.

I have an application creating a bunch of divs through a loop.

每个 div 都有产品"类

Each div has the class "product"

看起来像

<div class="product">
       !.....stuff here ....!
       <div class="show_on_hover">...buttons here... </div>
</div>

所以每页大约有 12 个相同的 div.

so there are about 12 of these same divs per page.

我想将鼠标悬停在一个特定的上方并显示最初设置为 display:none 的特定show_on_hover"div.

I would like to hover over a specific one and show the specific "show_on_hover" div which is initially set to display:none.

$('.product').hover(function() {
    $(.show_on_hover).show();
    },
    function () {
        $(.show_on_hover).hide();
    }
);

到目前为止，这就是我所拥有的，但它会在页面上显示所有 .show_on_hovers，所以我想知道如何仅获取您将鼠标悬停在上面的特定显示.当您将鼠标悬停在任何评论上时，会在 youtube 上看到这种效果，并且会弹出一些评论工具.

That is what I have so far but it will show ALL of the .show_on_hovers on the page so I am wondering how to get only the specific one you have moused over to show. This effect is seen on youtube when you mouseover any of the comments, and some comment tools pop up.

谢谢！

推荐答案

find 将在悬停的 .product 中找到您的 .show_on_hover div.试试这个:

find will find your .show_on_hover divs inside the hovered .product. Try this:

$('.product').hover(function() {
        $(this).find('.show_on_hover').show();
    },
    function () {
        $(this).find('.show_on_hover').hide();
    }
);

相关文章