1

この特定の問題に関する同様の投稿を見つけようとしましたが、ほとんど成功していないので、JQuery の経験がもう少し豊富な人が私の問題に光を当ててくれることを願っています。私は現在、ポートフォリオサイト、つまり大量の画像に取り組んでいます。サイトに表示されているサムネイル画像の 1 つの上にカーソルを置いたときに、Jquery のロールオーバー効果を作りたいと思いました。

効果自体は出ていますが、バグのようなものがあります。ページを更新するか、ページを新たに表示するたびに、マウスが Jquery 効果をトリガーするイメージ コンテナー要素に入るたびに、最初はそうではありませんが、ページを更新せずにもう一度試してみると、効果はあります。

基本的な html マークアップは次のとおりです。

<section class="main">
    <div class="wrapper">
        <article class="ImageContainer">
             <a href="#">
                 <img class="back" src="Images/Image1.jpg" alt="Image1"/>
                 <span class="over" style="display: none;">
                     <h2>Title</h2>
                     <p>Watch Project</p>
                 </span>
            </a>
        </article>
    </div>
</section>

ご覧のとおり、「ロールオーバー効果」を「display: none」ソリューションで解決しました。後で Jquery コード「fadeIn」を使用して、mouseenter 効果で表示できるようにしました。

以下は、span class="over" の CSS です。おそらく表示する必要はありませんが、念のためです。

.over {
    width: 300px;
    height: 300px;
    background-image:url(Images/over.png);
    position: absolute;
    top: 0px;
    left 0px;
}

そして今、私のJQueryのために

$(document).ready(function(){       
    $(".ImageContainer").mouseenter(function(){
        $(this).children('a').children('span').fadeIn(200);
    });
    $(".ImageContainer").mouseleave(function(){
        $(this).children('a').children('span').fadeOut(200);
    });
});

問題はブラウザで表示した場合にのみ発生するようですが、この jsfiddle は問題なく動作するようです。なぜだか途方に暮れています。他のドキュメントへのリンクもすべて機能し、jquery と jquery UI がリンクされています。

http://jsfiddle.net/LRdR9/

私の問題の解決策: 私の .over クラスには "display: block;" がありませんでした。これにより、ブラウザが表示されなくなりました。2 番目のマウス入力時に、自動的にそこに配置されます。別の問題があると思ってだまされました。

4

1 に答える 1

0

すべてがjsFiddleで動作するようです。

jsFiddle でコードを実行していることに注意してonloadください。ファイル自体でそれを実行していることを確認してください (jQuery は、必ず head ではなく body 内に配置してください)。また、複数のブラウザでテストしていることを確認してください。

Ps コードを次のように短縮できます。

$(document).ready(function(){    
   $(document).on('mouseenter mouseleave', '.ImageContainer', function () {
        $('a > span', this).fadeToggle(200);
   });
}):

例jsFiddle。

于 2013-03-28T15:39:24.020 に答える