jQuery hover()第二个回调

Question

我有一个div带有类名的元素event-element.当我悬停元素时,我希望它显示文本"鼠标悬停!".当我点击该元素时,我希望它显示"Clicked!" 到目前为止,我使用以下代码:

$(document).ready(function() {
    $('.event-element').hover(function(event) {
        $('.event-element').text("Mouse Over!");
    });
    $('.event-element').click(function(event) {
        $('.event-element').text("Clicked!");
    });
});

但是,在第二次悬停回调时,我需要显示"Mouse Left!"的文字.暗示鼠标不再悬停在元素上.任何有关如何使这项工作的建议表示赞赏.

Answer 1

.hover()绑定mouseenter和mouseleave事件.所以你会做这样的事情:

$(document).ready(function() {
    $('.event-element').hover(
        function(event) {
            $('.event-element').text("Mouse Over!");
        },
        function(event) {
            $('.event-element').text("Mouse Left!");
        }
    );

    $('.event-element').click(function(event) {
        $('.event-element').text("Clicked!");
    });
});