Javascript CSS/JQuery链接悬停赢了'；t火

我在jquery悬停设置中遇到问题。。我使用在本网站上找到的稍加修改的解决方案（示例5a）：

基本上，我的设置应该是这样工作的：将鼠标悬停在link元素（#1）上会触发em（#2）元素上的fadeIn#3是#1和#2后面的缩略图。

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

我获取了必要的代码位并将它们放在JSFiddle上。我以前从未使用过它，所以我希望我没有做错任何事情。下面是url：

html:

css:

感谢您花时间阅读这篇冗长的文章

---

-Ville

您没有在JSFIDLE中加载jQuery库，加载库后它工作正常：）

---

您应该在左侧面板上选择jQuery。现在可以工作了吗它对我很有用，你应该使用jquery作为库。它已设置为Mootools，如果它在您的页面中不起作用，请确保正确加载jquery。您是否解决了问题？

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

$(document).ready(function() {

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

});

.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;
}