當將鼠標懸停在div上時，如何循環顯示行並使用jQuery顯示另一個div？

Question

我正在試圖顯示一個div時，另一個被徘徊但是我正在努力將此與循環結合起來。

我的HTML是：

<div class="row"> 
     <div class="half"> 
      <img class="restaurant-logo" src=""/> 
      <p>Lorem ipsum dolor sit amet. </p> 
      <strong><a href="">Continue Reading</a></strong> 
      <a class="button order" href="#">Order now</a> 
     </div> 

     <div class="half image" style="background-image: url();"> 
      <div class="quote"> 
       <div class="quote-text"><p>Highlighted text </p></div> 
      </div> 
     </div> 
    </div> 
     <div class="row"> 
     <div class="half"> 
      <img class="restaurant-logo" src=""/> 
      <p>Lorem ipsum dolor sit amet. </p> 
      <strong><a href="">Continue Reading</a></strong> 
      <a class="button order" href="#">Order now</a> 
     </div> 

     <div class="half image" style="background-image: url();"> 
      <div class="quote"> 
       <div class="quote-text"><p>Highlighted text</p></div> 
      </div> 
     </div> 
    </div> 

的想法是這樣的：

當你將鼠標懸停在「現在訂購」按鈕，.quote文本從透明度0同一行變爲不透明1.

我試圖實現每個語句，也試圖去到父元素，並回到另一個孩子，但由於某種原因，每當我盤旋，所有的.quote文本正在改變。

我的jQuery如下。

$('.order').each(function() { 
    $(this).hover(
     function() { 
      $('.order').closest('.row').find('.quote').css('opacity', '1'); 
     }, 
     function() { 
      $('.order').closest('.row').find('.quote').css('opacity', '0'); 
     } 
    ); 
}); 

任何幫助將不勝感激，我覺得我很接近，但我的jQuery的技能是有限的，互聯網搜索和反覆試驗並沒有幫助我！

Answer 1

您遇到的問題是您在懸停時選擇了所有.order元素。相反，您可以使用this關鍵字僅引用引發事件的引用。試試這個：

$('.order').each(function() { 
    $(this).hover(function() { 
     $(this).closest('.row').find('.quote').css('opacity', '1'); 
    }, function() { 
     $(this).closest('.row').find('.quote').css('opacity', '0'); 
    }); 
}); 

從那裏，你可以更簡潔通過刪除冗餘each()循環，並hover()提供單一功能的邏輯這是在兩個mouseenter和mouseleave事件只是在調用toggle()解僱合適.quote：

$('.order').hover(function() { 
    $(this).closest('.row').find('.quote').toggle(); 
});