JQuery: связать несколько событий, а затем отменить пару из них?это правильно?

Question

связать несколько событий, а затем связать пару из них? это правильно?

в основном, когда вы наводите курсор мыши на элемент, цвет фона меняется, затем меняется обратно, когда вы наводите курсор мыши на элемент, но когда вы щелкаете элемент, я хочу отключить эффект наведения и изменить цвет фона на другой, так пользователь знает, что они нажали на него. какой лучший способ сделать это? спасибо!

$('.tellmereplies').bind({click: function() {
    $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'})
    $('.tellmereplies').unbind('mouseover','mouseout')
},mouseover: function() {
    $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'})
},mouseout: function() {
    $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'})
}
});

Answer 1

Взгляните на пространство имен событий jquery .Я думаю, что это, вероятно, будет полезно для вас.

$("#div1").bind("event_name.namespace1");
$("#div1").bind("some_other_event.namespace1");
$("#div1").bind("event_name.namespace2");
$("div1").unbind(".namespace1");

Answer 2

Я думаю, вы ищете это:

$('.tellmereplies').bind("click", function() {
    $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'})
    $(this).unbind('mouseover mouseout')
}).bind("mouseover", function() {
    $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'})
}).bind("mouseout", function() {
    $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'})
});

Answer 3

Я бы делал это в основном в CSS. Вы можете создавать эффекты наведения для своих ссылок, используя псевдокласс: hover

.tellmereplies:hover {
    color: #fff;
    background-color: #0099ff;
}

Затем, когда пользователь нажимает на ссылку, добавьте в ссылку другое значение класса и переопределите эффекты наведения для ссылки.

$('.tellmereplies').addClass('tellmereplies-clicked');

.tellmereplies-clicked {
    /* new colors */
}

.tellmereplies-clicked:hover {
    /* new colors */
}