所以我有一个图标,当你将鼠标悬停在它上面时它会发生变化。由于某种原因,原始图标仍然存在。这是我的代码
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/有任何想法吗?
最佳答案
为什么不使用 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)到元素。
关于javascript - 图标不改变悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24522528/