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

在悬停时使用jquery显示一个带有向下滚动效果的隐藏div

1 个答案: