javascript - CSS/JQuery 链接悬停不会触发

Question

我在使用 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>

j查询:

$(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;
}

感谢您花时间阅读这篇冗长的帖子!

-维尔

Answer 1

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

Jsfiddle Link