Question

这是我写的代码。它的作用是当将鼠标悬停在第一个项目上时，它会添加一个类，并且该类具有背景图像，并且还添加了html来解释从悬停中显示的图像。问题发生在我将鼠标悬停在下一个项目上，该项目取代了之前使用新的addclass图像悬停显示的旧信息，以及解释显示的新图像的新html。所以，如果我回到第一个项目，它将不会取代图像。我确信我需要一个removeClass，但我希望它告诉它删除类，如果有的东西到位。这是代码：

  function imageInfo(){
    $('#item_one').hover(function(){
        $('#img_holder').addClass('img_one');
        $('#about_me_cont aside p').html('text explaining img 1');
    });
    $('#item_three').hover(function(){
        $('#img_holder').addClass('img_two');
        $('#about_me_cont aside p').html('text explaining img 2');
    });
    $('#item_three').hover(function(){
        $('#img_holder').addClass('img_three');
        $('#about_me_cont aside p').html('text explaining img 3');
    });
  }

这是CSS：

.img_one{
    background-image: url('../images/img1.jpg');
    background-repeat: no-repeat;
    background-size:contain;
}
.img_two{
        background-image: url('../images/img2.jpg');
        background-repeat: no-repeat;
        background-size:contain;
}
.img_three{
    background-image: url('../images/img3.jpg');
    background-repeat: no-repeat;
    background-size:contain;
}

有一个html注入的段落，我在CSS中设置它。那么在我将鼠标悬停在第一项然后转到第2项然后再返回第1项时会发生什么，它会将第2项图像保留在那里，html会发生变化，但第2项中的图像却没有。如果有一个类，我将如何编写removeClass，以便它将再次显示第一个项目图像？谢谢你的帮助！

Answer 1

你的代码中有一个拼写错误：它应该在哪里

$('#item_two').hover(function(){

它反过来说是item_three。

也就是说，使用jQuery removeClass函数没有任何问题，即使没有类，它也不会失败。所以你可以这样做：

function imageInfo(){
    $('#item_one').hover(function(){
        $('#img_holder').removeClass().addClass('img_one');
        $('#about_me_cont aside p').html('text explaining img 1');
    });
    $('#item_three').hover(function(){
        $('#img_holder').removeClass().addClass('img_two');
        $('#about_me_cont aside p').html('text explaining img 2');
    });
    $('#item_three').hover(function(){
        $('#img_holder').removeClass().addClass('img_three');
        $('#about_me_cont aside p').html('text explaining img 3');
    });
  }

将鼠标悬停在不同的ID上时删除

1 个答案: