在hover时使用jquery显示带有向下滚动效果的隐藏div

我想创建一个function，所以当用户将鼠标hover在LI上时，div会使用jquery easing向下爬行。

JsFiddle： http ： //jsfiddle.net/WZvPk/2/

这是我到目前为止：

HTML

 
 
 
 
  
 Sector 1 
  
 
  
View project
 
 
 
 
 
 
  
 Sector 2 
  
 
  
View project
 
 
 
 
 
  
 Sector 3 
  
 
  
View project
 
 
 
 
 
 
  
 Sector 4 
  
 
  
View project
 
 
 
 
 
 
  
 Sector 5 
  
 
  
View project
 
 
 
 
 
 
  
 Sector 6 
  
 
  
View project
 
 
 
 
 
 
  
 Sector 7 
  
 
  
View project
 
 
 
 
 
 
  
 Sector 8 
  
 
  
View project
 
 
 
 
 
  

CSS：

 /*force the image size to be set by css*/ div.sectorImage a img { width:193px; height:88px; } div.showMe { display:block; } .sectorGrid { position:relative; } 

jQuery的

 $("ul.sectors li").hover( function () { $("div.sectorImage div.showme").css("display", "block"); }, function () { $("div.sectorImage div.showme").css("display", "none"); } ); 

这个想法是当用户将鼠标hover在该部分上时，它将缓慢地将隐藏的div放在底部，允许他们单击“查看项目”链接。

我在使用一个LI进行此工作时遇到问题，如果您测试jsfiddle，您可以看到display：block似乎工作但是对于所有LI，这是错误的。

你能解释得更好吗？

Answer 1

如果你改变这个

 $("div.sectorImage div.showme").css("display", "block"); 

对此

 $(this).children(".sectorImage").children(".showme").css("display", "block"); 

你只会展示一个div