javascript - 图标不改变悬停

Question

所以我有一个图标，当你将鼠标悬停在它上面时它会发生变化。由于某种原因，原始图标仍然存在。这是我的代码

var originalContent = $('.fa-heart').html();
$('.fa-heart').hover(function() {
     $('.fa-heart').html('<i class="fa fa-heart-o"></i>');   
}, function() {
     $('.fa-heart').html(originalContent); 
});

还有一个演示 http://jsbin.com/favukece/1/有任何想法吗？

Answer 1

Updated Code

为什么不使用 addClass() / removeClass() ？添加的类将覆盖先前类的属性。

$('.fa-heart').hover(function() {
     $(this).addClass('fa-heart-o');   
}, function() {
     $(this).removeClass('fa-heart-o'); 
});

按照 Meagar 的建议进行更新:

$('.fa-heart').hover(function() {
     $(this).toggleClass('fa-heart-o fa-heart');   
}, function() {
     $(this).toggleClass('fa-heart-o fa-heart'); 
});

在您当前的代码中，图标使用 class 而不是 html 绑定(bind)到元素。