jQuery使用与li相同的链接在li上设置图片动画_Jquery_Position_Html Lists_Mouseover

jQuery使用与li相同的链接在li上设置图片动画

jquery

jQuery使用与li相同的链接在li上设置图片动画,jquery,position,html-lists,mouseover,Jquery,Position,Html Lists,Mouseover,基本上，我想要这种功能，但不太复杂：我有一个ul的各种李的照片，其中将链接到一个LinkedIn帐户只（不是Twitter，以及在例子中）。我希望当你将鼠标悬停在其中一张图片上时，jQuery动画会在上面显示一个图像，你可以点击它转到他们的LinkedIn。（最终这些都将是不同人的照片。）这是我的小提琴：如果可能的话，我不想为每个盒子创建一个id，因为我将拥有40多个盒子（并且还在增长）我的主要问题是： 1）我无法让divHover在我悬停的图片上正确地设置自己的动画（它到处都是！）

基本上，我想要这种功能，但不太复杂：

我有一个ul的各种李的照片，其中将链接到一个LinkedIn帐户只（不是Twitter，以及在例子中）。我希望当你将鼠标悬停在其中一张图片上时，jQuery动画会在上面显示一个图像，你可以点击它转到他们的LinkedIn。（最终这些都将是不同人的照片。）

这是我的小提琴：

如果可能的话，我不想为每个盒子创建一个id，因为我将拥有40多个盒子（并且还在增长）

我的主要问题是：

1）我无法让divHover在我悬停的图片上正确地设置自己的动画（它到处都是！）

2）我无法让divHover链接到不同的网页

我确信有一种方法可以让我动态地做这件事，但我想不出来

顺便说一句，这个问题很相似，但取决于为每个块创建一个id：

我还没有找到一个好的例子（我能理解）。但是这个问题很难描述，所以我可能错过了

我对jQuery还不熟悉，所以如果可能的话，请把你的答案记下来。：）

提前谢谢

我已经做了一个简单的例子，说明我将如何做。就像在blueacorn上一样，我提前为每个li添加了覆盖层，因此可以看到多个li。（如果一个仍在向下滑动，其他人可以同时向上滑动）

您的HTML中也有一些问题，例如

在

li

附近，这是不允许的

下面是我的例子：

演示：

HTML:

我会采用这种方法。需要注意的重要部分是缩略图的相对位置和悬停的绝对位置。另外，请注意如何创建多个悬停元素，每个缩略图一个

编辑：我还通过将

元素直接嵌套在

中，然后从那里嵌套锚定标记，使HTML变得正确。

下面的代码完全符合您的要求

<!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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</a></span>
        </li>


    </ul>
</body>
</html>


上下滚动
$（文档）.ready（函数（）{
$（“.li上下滚动”）.mouseover（函数（）{
$（this.find（“span.hover link”）.show（）；
});
$（“.上下滚动li”）.mouseout（函数（）{
$（this.find（“span.hover link”）.hide（）；
});
});
正文{背景：#CCC；字体系列：Arial，Helvetica，无衬线；}
h1{字体大小：16px；文本对齐：居中；}
.上下滚动{边框：1px虚线#bbb；边距：0自动；填充：0；文本对齐：中心；宽度：400px；}
.上下滚动li{显示：内联块；列表样式：无；边距：10px；位置：相对；文本对齐：中心；宽度：100px；z索引：999；}
。上下滚动li span.hover-link{background:url（hover-div.png）不重复；
边框：5px实心#000；
颜色：#FFF；
字体大小：12px；
字体大小：粗体；
显示：无；
高度：60px；
左：0；
列表样式：无；
填充顶部：40px；
位置：绝对位置；
过滤器：α（不透明度=50）；
不透明度：0.5；
文本对齐：居中；
排名：0；
垂直对齐：底部对齐；
宽度：100px；
z指数：1000；
}
。上下滚动li span.hover-link a.linkedin-icon{背景：url（linked icon.png）不重复0-50px；显示：内联块；高度：40px；宽度：40px；}
。上下滚动li span.hover-link a.linkedin-icon:hover{背景位置：0；显示：内联块；高度：40px；宽度：40px；}
.上下滚动一个span{font size:12px；}
.上下滚动{显示：内联块；文本装饰：无；}
.上下滚动LIA图像{边框：5px实心#000；高度：100px；宽度：100px；}
用户配置文件网格

我知道，自动转换到隐藏div的on hover完全可以用CSS实现，这里有很多例子（在“演讲者”页面上）：如果没有答案，也许我今晚可以回到这个问题上来。我还注意到，你可以使用一个名为“sprite”的图像，它是两个图像的组合，当你想给精灵设置动画时，使用溢出隐藏和绝对定位；唯一的问题是，当快速连续地将鼠标悬停在多个屏幕上时，许多屏幕会被图像覆盖卡住。我想有办法清除它，但我试过了。停止（）。动画（）。。。没有变化。谢谢我能够实现这一点

$('li').hover(function() {
    $(this).find('a').stop().animate({
        'top': '0%'
    }, 300);
}, function() {
    $(this).find('a').stop().animate({
        'top': '100%'
    }, 300);
})

<!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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</a></span>
        </li>


    </ul>
</body>
</html>