0

我在使用 jquery 悬停设置时遇到问题。我使用在此站点上找到的稍作修改的解决方案（示例 5a）：http ://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

基本上我的设置应该像这样工作：悬停在链接元素（#1）上会触发 em（#2）元素上的淡入淡出。#3是#1和#2后面的缩略图。

它昨天有效，但后来我设法打破了它。我尝试检查拼写错误并删除不必要的代码，但无法正常工作:(

我获取了必要的代码位并将它们放在JSFiddle上。我以前从未使用过它，所以我希望我没有做错任何事.. 这是网址：http: //jsfiddle.net/kuFDT/3/

html:

<ul class="showcase">
<li>
    <a href=""> asd </a>         // #1
        <em> doop derk </em>     // #2
    <div class="sample"></div>   // #3
</li>
</ul>

jQuery：

$(document).ready(function() {

$(".showcase a").hover(function() {
        $(this).next("em").fadeIn(200);
    }, function() {
        $(this).next("em").fadeOut(200);
    });

});

CSS：

.showcase a:link { width:300px; height:200px; float:left; background-color: #f2f2f2; }

.showcase { list-style: none outside none; }

.showcase li {
    float:left;
    z-index:-20;
    position: relative;
}

.showcase em {                        
    height:50px;
    width:300px;
    left:0;
    top:280px;
    display:none;
    position:absolute;
    z-index:-5;
    color: white;
    background-color: orange;
}


div.sample {
    width:300px;
    height:300px;
    float:left;
    background-color:#B3B3B3;
    position:absolute;
    top:0;
    left:0;
    z-index:-10;
}

感谢您花时间阅读这篇长篇大论！

-维尔

4

1 回答 1

0

您没有在 jsFiddle 中加载 jQuery 库，加载 Lib 后它工作正常 :)

Jsfiddle 链接

于 2012-05-10T09:03:35.403 回答