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>

问题是当我将鼠标悬停在一个项目上时，它会显示所有项目的隐藏文本！如何修复只显示我悬停的项目的文本？

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 回答