2

このスクリプトを使用して、アイテムの非表示のテキストをアニメーション化/表示しています。

/* Artworks Hide/show text */
$(".item").hover(function() {
    //fadein second image using jQuery fadeIn 
$(".item .art_title").fadeIn(200);
    }, function () {
//fadein first image using jQuery fadeIn
    $(".item .art_title").fadeOut(200);
});

そしてこれはHTMLです：

            <div class="item">
                <img src="img/artwork1.jpg" alt="artwork1" width="240" height="173">
                <div class="art_title">
                    <p>SWEET LIFE</p>
                </div>
                <div class="mask"></div>
            </div>

問題は、1つのアイテムにカーソルを合わせると、すべてのitmesの非表示のテキストが表示されることです。ホバーしているアイテムのテキストだけを表示するように修正するにはどうすればよいですか？

4

3 に答える 3

2

に変更して、それに$(this).find(".art_title").fadeIn(200); 応じて、$(this).find(".art_title").fadeOut(200);

現在、クラスart-titleを持つすべての要素を選択しています。ホバーされた要素内で、クラスart-titleを持つすべての要素が必要です。

于 2012-10-11T12:14:31.953 に答える
1

これを試して：

/* Artworks Hide/show text */
$(".item").hover(function () {
    //fadein second image using jQuery fadeIn 
    $(this).find('.art_title').fadeIn(200);
}, function () {
    //fadein first image using jQuery fadeIn
    $(this).find('.art_title').fadeOut(200);
});
于 2012-10-11T12:13:54.980 に答える
0

これは、jQueryコードでセレクターのクラスを使用しているために発生します。また、試すことができます：

$('.item').mouseenter(function() {

    $(this).find('.art_title').fadeIn(200); 

}).mouseleave(function() {

    $('.art_title').fadeOut(200);
});
于 2012-10-11T13:12:15.533 に答える