我正在使用此脚本来动画/显示项目的隐藏文字:
/* 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>
问题是,当我将鼠标悬停在一个项目上时,它会显示所有主题的隐藏文字!如何修复仅显示我悬停的项目的文本?
答案 0 :(得分:2)
尝试将其更改为$(this).find(".art_title").fadeIn(200);
相应地,$(this).find(".art_title").fadeOut(200);
您目前正在选择具有类art-title的所有元素。您希望悬停的所有元素都具有类art-title。
答案 1 :(得分: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);
});
答案 2 :(得分:0)
这是因为您在jQuery代码中使用了选择器类。你也可以尝试:
$('.item').mouseenter(function() {
$(this).find('.art_title').fadeIn(200);
}).mouseleave(function() {
$('.art_title').fadeOut(200);
});