jquery - 悬停需要针对特定​​容器而不是两者

Question

这是小提琴：http: //jsfiddle.net/sarvagnya1/ECj4V/

jQuery代码：

  $(".container").hover(function(){
    $(".circle-hide").animate({height: '0px'});
    },function(){
   $(".circle-hide").animate({height: '95px'});
  });

有两个主要容器，当我将鼠标悬停在其中一个上时，该功能会作用于两个容器。应该进行哪些更改，以便只有发生悬停的容器才会发生动画效果。

Answer 1

您必须使用this并且悬停需要发生在circle-cont而不是container.

  $(".circle-cont").hover(function(){
    $(this).find(".circle-hide").animate({height: '0px'});
    },function(){
    $(this).find(".circle-hide").animate({height: '95px'});
  });

JSFIDDLE 演示