显示一个隐藏的div与滚动下来效果使用jquery悬停 [英] displaying a hidden div with a scroll down effect using jquery on hover

问题描述

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

I would like to create a feature so when the user hovers over the LI, a div crawls down using 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他们点击查看项目链接。

The idea is when the user hovers over the section it will slowely drop the hidden div at the bottom allowing them to click the "view project" link.

我有一个问题使这项工作与一个LI，如果你测试的jsfiddle你可以看到display：block似乎

I am having problems making this work with just one LI, if you test the jsfiddle you can see display:block seems to work but for all the LI, which is wrong.

现在ive能更好地解释一下吗？

Could you help me now that ive explained better?

推荐答案

如果您更改此

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

到此

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

您将只显示一个div

you'll be showing only one div

这篇关于显示一个隐藏的div与滚动下来效果使用jquery悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！