基本上，我想要这种功能，但不那么复杂：http://www.blueacorn.com/team/
我有各种各样的li包含图片，这些图片仅链接到LinkedIn帐户（不是Twitter，也不像示例中那样）。我希望它是当你将鼠标悬停在其中一张图片上时，一个jQuery动画将在其上显示一个图像，你可以点击它去他们的LinkedIn。 （最终这些都是不同的人的照片。）
这是我的JFiddle：http://jsfiddle.net/h5y64/
如果可能的话，我不想为每个盒子创建一个id，因为我将拥有40多个（并且还在增长）。
我的主要问题是：
1）我无法让divHover在我徘徊的画面上正确地制作动画（它遍布整个地方！）
2）我无法将divHover链接到不同的网页。
我确信有一种方法让我动态地做到这一点，但我无法理解。
顺便说一下，这个问题很相似，但依赖于为每个块创建一个id：How to position a hover div based on the position of the element我真的没能找到一个很好的例子（我能理解）。但问题很难描述，所以也许我错过了它。
我还是jQuery的新手，所以如果可能请愚蠢地回答你的问题。 ：）
提前致谢！
答案 0 :(得分：1)
我已经快速举例说明了我将如何做到这一点。 就像在blueacorn上一样，我提前将叠加层添加到每个li中，因此可以看到多个叠加层。 （如果一个人仍在向下滑动，其他人可以同时向上滑动。）
您的HTML也遇到了一些问题，例如a周围的li，这是不允许的。
这是我的例子：
演示：
HTML：
<ul>
<li>
<div>
<img src="http://w3schools.com/css/klematis.jpg" />
<a href=""></a>
</div>
<h6>Name 1</h6>
</li>
.
.
.
</ul>
JS：
$('li').hover(function() {
$(this).find('a').stop().animate({
'top': '0%'
}, 300);
}, function() {
$(this).find('a').stop().animate({
'top': '100%'
}, 300);
})
答案 1 :(得分：0)
我会采用this JSFiddle中的方法。需要注意的重要部分是缩略图的相对位置和divHovers的绝对定位。另外，请注意如何创建多个悬停元素，每个缩略图一个。
编辑：我还通过将<li>元素直接嵌套在<ul>中，然后从那里嵌套锚标记来使HTML正确。
答案 2 :(得分：0)
下面的代码可以根据您的要求完美运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll - Up - Down</title>
<!-- SCRIPTS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".scroll-up-down li").mouseover(function(){
$(this).find("span.hover-link").show();
});
$(".scroll-up-down li").mouseout(function(){
$(this).find("span.hover-link").hide();
});
});
</script>
<!-- SCRIPTS -->
<!-- STYLES -->
<style type="text/css">
body { background:#CCC; font-family:Arial, Helvetica, sans-serif; }
h1 { font-size:16px; text-align:center; }
.scroll-up-down { border:1px dashed #bbb; margin:0 auto; padding:0; text-align:center; width:400px; }
.scroll-up-down li { display:inline-block; list-style:none; margin:10px; position:relative; text-align:center; width:100px; z-index:999; }
.scroll-up-down li span.hover-link { background:url(hover-div.png) no-repeat;
border:5px solid #000;
color:#FFF;
font-size:12px;
font-weight:bolder;
display:none;
height:60px;
left:0;
list-style:none;
padding-top:40px;
position:absolute;
filter: alpha(opacity=50);
opacity: 0.5;
text-align:center;
top:0;
vertical-align:bottom;
width:100px;
z-index:1000;
}
.scroll-up-down li span.hover-link a.linkedin-icon { background:url(linked-icon.png) no-repeat 0 -50px; display:inline-block; height:40px; width:40px; }
.scroll-up-down li span.hover-link a.linkedin-icon:hover { background-position:0 0; display:inline-block; height:40px; width:40px; }
.scroll-up-down li a span { font-size:12px; }
.scroll-up-down li a { display:inline-block; text-decoration:none; }
.scroll-up-down li a img { border:5px solid #000; height:100px; width:100px; }
</style>
<!-- / STYLES -->
</head>
<body>
<h1> User Profiles Grid</h1>
<ul class="scroll-up-down">
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. ABC</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. PQR</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. XYZ</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. LMN</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. DEF</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. JKL</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. RST</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. QWE</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
<li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. YUI</span></a>
<span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
</li>
</ul>
</body>
</html>