jQuery的效果基本show（）只 '这个' DIV

Question

我有这样的标记×3：

 <div class="features"> 
      <span class="overlay"><img src="img/webdesign.png" /></span> 
      <h2>Web Design</h2> 
      <p>Cow pig turkey, chuck sausage pork loin venison biltong shoulder. Shoulder pancetta short loin beef ribs, turkey corned beef shankle swine spare ribs pork chop hamburger beef brisket shank. Pork belly tenderloin brisket, strip steak ribeye bacon tail andouille shoulder t-bone flank venison chicken.</p> 
     </div> 

Span class overlay位于绝对覆盖H2 + P.我有三个这些div class features的。我想使用jQuery来将鼠标悬停在features div上时，该div中的叠加层单独滑动，当用户离开时，将overlay div向下滑动。

$(".features").hover(
    function() { 
    $('.overlay').slideUp(); 
    }, 
    function() { 
    $('.overlay').slideDown(); 
    } 
); 

我有这到目前为止，但我很清楚它不工作：使类覆盖的元素被认为是DIV内选择上）

Answer 1

添加this上下文jQuery选择功能目前徘徊。

试试这个：

$(".features").hover(function() {  
    $('.overlay', this).slideUp(); 
    }, function() {  
    $('.overlay', this).slideDown(); 
}); 

Answer 2

.slideToggle()是你的朋友。

$(".features").hover(function() 
{ 
    $(this).find('.overlay').slideToggle(); 
    // or 
    $('.overlay', this).slideToggle(); 
}); 

// fin