Question

$('#closecallout').click(function() {
    $('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
});
$('.calloutclosed').hover(function() {
    $(this).animate({"right" : "0px"}, 500);
}, function() {
    $(this).animate({"right" : "-260px"}, 500);
});

点击功能意味着“隐藏”标注框，然后，当悬停时，它将重新移动到焦点。

为什么悬停功能不起作用？是因为这些都在jQuery(function($){ });？

之内

我应采取哪些措施来纠正这个问题？

http://jsfiddle.net/R5Dmu/

非常感谢SO

Answer 1

要根据当前班级触发元素触发事件，您需要将事件委派与.on()一起使用。

$('#closecallout').click(function() {
    $('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
});
$(document).on('mouseover', '.calloutclosed', function() {
    $(this).animate({"right" : "0px"}, 500);
}).on('mouseout', '.calloutclosed', function() {
    $(this).animate({"right" : "-260px"}, 500);
});

DEMO

Answer 2

调用click函数时需要添加类并实现悬停功能。在您的代码中您在单击事件上添加了类但未实现悬停功能。你在文件就绪上实现了悬停功能，然后Jquery可以找到带有calloutclosed类的选择器，因为它还没有点击事件。

检查一下：

jQuery(function ($) {

//CALLOUT
$('#closecallout').click(function () {
    $('.callout').animate({
        "right": "-260px"
    }, 500)
    $('.callout').addClass('calloutclosed');

    $('.calloutclosed').hover(function () {
        $(this).animate({
            "right": "0px"
        }, 500);
    }, function () {
        $(this).animate({
            "right": "-260px"
        }, 500);
    });

});
});

添加了类上的addClass（）之后的JQuery函数

2 个答案: