0

jqueryホバーのセットアップに問題があります。このサイトで見つけたわずかに変更されたソリューションを使用しています（例5a）：http ://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

基本的に、私の設定は次のように機能するはずです。リンク要素（＃1）にカーソルを合わせると、em（＃2）要素でfadeInがトリガーされます。＃3は＃1と＃2の後ろのサムネイル画像です。

昨日はうまくいきましたが、なんとか壊してしまいました。タイプミスをチェックして不要なコードを削除しようとしましたが、機能しません:(

必要なコードビットを取得してJSFiddleに配置しました。これまで使用したことがないので、何も悪いことをしなかったと思います。 ..これがURLです：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 に答える