jquery hoover同類目標只有一個

Question

我在頁面中使用此jquery代碼，並在產品列表中顯示用戶懸停項目時的兩個鏈接。問題是所有的產品都具有相同的類「.prod_box」，如果我將一個項目懸停，那麼腳本會將所有div與同一類相關聯。腳本是否可以只定位我懸停的項目，而不是所有具有相同類的項目？沒有給每個產品一個不同的類。

$('.prod_box').mouseover(function() { 
     $('.div_overlay').show(); 
    }).mouseout(function() { 
     $('.div_overlay').hide(); 
    }); 

下面是HTML：

  <div class="prod_box"> 
       <a href="#"> 
        <div class="prod_img"> 
         <img src="images/produse_1.png" /> 
         <div class="div_overlay"> 
          <a href="http://google.ro" class="insider_box"><span class="glyphicon glyphicon-search white_prod"></span></a> 
          <a href="http://google.ro" class="insider_box"><span class="glyphicon glyphicon-link white_prod"></span></a> 
         </div>       
        </div> 
        <div class="title_produs text-left"> 
         <h3>Nume produs</h3> 
         <p>Loreum ipsum situm dolores</p> 
        </div> 
       </a> 
      </div> 

      <div class="prod_box"> 
       <a href="#"> 
        <div class="prod_img"> 
         <img src="images/produse_4.png" /> 
         <div class="div_overlay"> 
          <a href="http://google.ro" class="insider_box"><span class="glyphicon glyphicon-search white_prod"></span></a> 
          <a href="http://google.ro" class="insider_box"><span class="glyphicon glyphicon-link white_prod"></span></a> 
         </div>       
        </div> 
        <div class="title_produs text-left"> 
         <h3>Nume produs</h3> 
         <p>Loreum ipsum situm dolores</p> 
        </div> 
       </a> 
      </div> 
     </div> 

Answer 1

假設.div_overlay是.prod_box的後代元素，你可以使用.find()：

$('.prod_box').mouseover(function() { 
    $(this).find('.div_overlay').show(); 
}).mouseout(function() { 
    $(this).find('.div_overlay').hide(); 
}); 

Answer 2

您正在尋找：

$('.prod_box').mouseover(function() { 
     $(this).find('.div_overlay').show(); 
}).mouseout(function() { 
     $(this).find('.div_overlay').hide(); 
});