Question

我有一个带叠加层的图片列表。当鼠标悬停在图像上时，假设文本和叠加层使用JQuery消失。当我将鼠标悬停在图像上时，该特定图像的叠加层会消失，这是正确的。问题是文本。当我将鼠标悬停在图像上时，该图像和所有其他图像上的文本消失。我只希望隐藏该特定图像的文本和叠加层。这似乎是一个小问题，因为我让叠加层正常工作。在此先感谢朋友们。

这是JQuery：

//Hides the screen and text on mouseover
$('.screen').mouseover(function() {
    $('.screen_text').hide();
    $(this).slideUp(400);

});
//Shows the screen and text on mouseout
$('.portfolio img').mouseout(function() {
    $('.screen_text').show();
    $('.screen').slideDown(400);

});

Answer 1

没有看到你的html模型，我的假设是你的jquery选择器带回所有的文本元素（因为你正在做$（'。screen_text'））我想你想要做的是：

$('.screen_text',this).hide();

应该只返回在此

的上下文中具有类名screen_text的元素

Answer 2

类选择器匹配太多。

//Hides the screen and text on mouseover
$('.screen').mouseover(function() {
    $(this).find('.screen_text').hide();
    $(this).slideUp(400);

});
//Shows the screen and text on mouseout
$('.portfolio img').mouseout(function() {
    $('.screen_text').show();
    $('.screen').slideDown(400);

});

使用jQuery的.find()搜索.screen_text作为h .screen的后代。

Answer 3

问题是，当您执行$('.screen_text').hide();时，您隐藏了每个具有类名“screen_text”的元素。您应该找到一种更好的方法来选择或区分它们。

如果没有看到DOM的示例，就无法提供任何更多支持。虽然在执行这个jQuery时可能存在逻辑错误，但语法上没有任何错误。

JQuery脚本的小问题

3 个答案: