当将鼠标悬停在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(); 
});