javascript - 在悬停时使用 jquery 显示具有向下滚动效果的隐藏 div

Question

我想创建一个功能，这样当用户将鼠标悬停在 LI 上时，一个 div 会使用 jquery easing 向下爬行。

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

想法是，当用户将鼠标悬停在该部分上时，它会慢慢地将隐藏的 div 放在底部，从而允许他们单击“查看元素”链接。

我在仅使用一个 LI 时遇到问题，如果您测试 jsfiddle，您会看到 display:block 似乎有效，但对于所有 LI，这是错误的。

既然我解释得更好了，你能帮我吗？

Answer 1

如果你改变这个

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

对此

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

你只会显示一个 div