悬停的jQuery特定显示按钮 [英] jquery specific show buttons on hover

问题描述

每个div都有类product

所以它看起来像

 < div class =product> 
！.....这里的东西....！ 
< div class =show_on_hover> ...此处的按钮...< / div> 
< / div> 
  

所以每页有大约12个这样的div。

我想将鼠标悬停在某个特定的位置上，并显示最初设置为显示的特定show_on_hover格：无。

  $（'。product'）。hover（function（）{
 $（。show_on_hover）.show（）; 
}，
 function（）{
 $（。show_on_hover）.hide（）; 
} 
）; 
  

这是我目前为止的内容，但它会显示页面上的所有.show_on_hovers，所以我我想知道如何才能得到你已经挖掘出来的具体内容。当您将鼠标悬停在任何评论上时，就会在YouTube上看到这种效果，并且会弹出一些评论工具。

/api.jquery.com/find/rel =noreferrer> find 会在兜帽内找到您的 .show_on_hover div 。产品。试试这个：

  $（'。product'）。hover（function（）{
 $（this）。 find（'。show_on_hover'）。show（）; 
}，
 function（）{
 $（this）.find（'。show_on_hover'）。hide（）; 
} 
）; 
  

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

Each div has the class "product"

so it looks like

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

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

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();
    }
);

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.

Thanks!

解决方案

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();
    }
);

这篇关于悬停的jQuery特定显示按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！