无法删除点击上的悬停效果？

Question

这是我的代码：

$('.ratings_stars').hover(
    // Handles the mouseover
    function() {
        $(this).prevAll().addClass('ratings_over');
        $(this).addClass('ratings_over');
        $(this).nextAll().removeClass('ratings_vote');
    },
    // Handles the mouseout
    function() {
        $(this).prevAll().removeClass('ratings_over');
        $(this).removeClass('ratings_over');
    }
);

$('.ratings_stars').click(function() {
    $('.ratings_stars').unbind('mouseout');
    $(this).off('mouseout');
    console.log('rating star clicked!')
    var star = this;
    var widget = $(this).parent();
    $(this).prevAll().addClass('ratings_over');
    $(this).addClass('ratings_over');
    var clicked_data = {
        clicked_on: $(star).attr('class'),
        widget_id: widget.attr('id')
    };
});

我试过.unbind和.off但是mouseout仍有效果吗？救命？我想在上一个元素和点击目标元素上添加rating_over类，并禁用鼠标悬停效果。

Answer 1

与解开hover的所有事件不同，你应该使用mouseenter mouseleave

$('.ratings_stars').unbind('mouseenter mouseleave');