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>

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

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

-Ville

Answer 1

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

Jsfiddle Link

CSS / JQuery链接悬停不会触发

1 个答案: