显示一个隐藏div与向下滚动效果使用jQuery的悬停

Question

我想创建一个功能，所以当用户悬停在LI，一个div爬下来使用jQuery缓动。

的jsfiddle：http://jsfiddle.net/WZvPk/2/

这是我到目前为止有：

HTML

<div class="sectorWrapper"> 
<ul class="sectors"> 
    <li> 
    <div class="sectorGrid"> 
    <div class="sectorTextWrapper"> 
    <a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self"> 
    <div class="sectorTitle"> 
    Sector 1 
    </div> 
    </a> 
    </div> 
    <div class="sectorImage"> 
    <a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self"><img alt="" style="width: 193px; height: 88px;" src="http://i40.tinypic.com/34dpi8o.jpg" /></a> 
     <div style="margin-top:-30px; display:none;" class="showme">View project</div> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div class="sectorGrid"> 
    <div class="sectorTextWrapper"> 
    <a href="/en-us/sectors.aspx" target="_blank"> 
    <div class="sectorTitle"> 
    Sector 2 
    </div> 
    </a> 
    </div> 
    <div class="sectorImage"> 
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a> 
     <div style="margin-top:-30px; display:none;" class="showme">View project</div></div> 
    </div> 
    </li> 
    <li> 
    <div class="sectorGrid"> 
    <div class="sectorTextWrapper"> 
    <a href="/en-us/sectors.aspx" target="_blank"> 
    <div class="sectorTitle"> 
    Sector 3 
    </div> 
    </a> 
    </div> 
    <div class="sectorImage"> 
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a> 
     <div style="margin-top:-30px; display:none;" class="showme">View project</div> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div class="sectorGrid"> 
    <div class="sectorTextWrapper"> 
    <a href="/en-us/sectors.aspx" target="_blank"> 
    <div class="sectorTitle"> 
    Sector 4 
    </div> 
    </a> 
    </div> 
    <div class="sectorImage"> 
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a> 
     <div style="margin-top:-30px; display:none;" class="showme">View project</div> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div class="sectorGrid"> 
    <div class="sectorTextWrapper"> 
    <a href="/en-us/sectors.aspx" target="_blank"> 
    <div class="sectorTitle"> 
    Sector 5 
    </div> 
    </a> 
    </div> 
    <div class="sectorImage"> 
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a> 
     <div style="margin-top:-30px; display:none;" class="showme">View project</div> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div class="sectorGrid"> 
    <div class="sectorTextWrapper"> 
    <a href="/en-us/sectors.aspx" target="_blank"> 
    <div class="sectorTitle"> 
    Sector 6 
    </div> 
    </a> 
    </div> 
    <div class="sectorImage"> 
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a> 
     <div style="margin-top:-30px; display:none;" class="showme">View project</div> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div class="sectorGrid"> 
    <div class="sectorTextWrapper"> 
    <a href="/en-us/sectors.aspx" target="_blank"> 
    <div class="sectorTitle"> 
    Sector 7 
    </div> 
    </a> 
    </div> 
    <div class="sectorImage"> 
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a> 
     <div style="margin-top:-30px; display:none;" class="showme">View project</div> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div class="sectorGrid"> 
    <div class="sectorTextWrapper"> 
    <a href="/en-us/sectors.aspx" target="_blank"> 
    <div class="sectorTitle"> 
    Sector 8 
    </div> 
    </a> 
    </div> 
    <div class="sectorImage"> 
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a> 
     <div style="margin-top:-30px; display:none;" class="showme">View project</div> 
     <br /> 
    </div> 
    </div> 
    </li> 
</ul> 
</div> 

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"); 
    } 
); 

的想法是，当用户将鼠标悬停在该节将slowely底部允许他们单击“查看项目”链接拖放隐藏的股利。

我遇到了问题，使这个工作只有一个李，如果你测试jsfiddle，你可以看到显示：块似乎工作，但对于所有的李，这是错误的。

现在你能帮我解释一下吗？

Answer 1

如果更改此

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

这个

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

你会只显示一个DIV