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

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 DEMO