jquery - 检查鼠标是否悬停在任何对象上

Question

我在这里有一个 jQuery 动画示例：http : //jsfiddle.net/p7Eta/

如果鼠标根本不在容器 div 内，我希望所有标题都弹出。我试图做类似的事情：

$("#container").mouseout(

     function() {
    //slides spans up
    $('.popup').stop().animate({
        bottom: 0 + 'px'
    });

});

但它不适用于之前的动画。实现这种效果的正确方法是什么？

编辑：我想要类似的东西：http: //jsfiddle.net/RE3XK/但是在鼠标悬停时，我希望单个跨度标题像第一个示例一样弹出，而不是让它们全部消失

Answer 1

你的意思是这样的。

检查工作示例http://jsfiddle.net/p7Eta/8/

更新

$("#slider div.popup").hover(
function() {

    //slides spans up
    $('span', this).animate({
        bottom: 0 + 'px'
    });
}, function() {

    //slides spans down
    $('span', this).animate({
        bottom: '-' + 200 + 'px'
    });
});

$(document).mouseover(
function(e) {
    e.stopPropagation()
    $('#slider div.popup').find(' span').animate({
        bottom: 0
    });
});

Answer 2

我的猜测是，您正在寻求与此类似的东西，对吗？我尝试的方式的唯一问题是您输入的元素也会向下滑动（我猜它不应该）。

Answer 3

终于，jsFiddle合作了……

我正在做一些hacky，但这是我可以让它工作的唯一方法。我必须向.hover当前悬停的元素添加一个类，因为没有它我的代码无法正常工作。只是不看代码，它看起来不错！

这是一个工作示例：http: //jsfiddle.net/p7Eta/41/

和代码：

// JavaScript Document

//When div.popup is moused over moused over
$("#slider div.block").hover(

function() {

    //slides spans up
    $(this).addClass('hovered');
    $(this).find('span').stop().animate({
        bottom: '0px'
    });
}, function() {
$(this).removeClass('hovered');
    //slides spans down
    $(this).find('span').stop().animate({
        bottom: '-200px'
    });
});

$('#container').hover(function() {
    $('#slider div.block:not(.hovered) span').animate({
        bottom: '-200px'
    });
}, function() {
    $('#slider div.block span').stop().animate({
        bottom: '0px'
    });
});

Answer 4

或类似的东西......它实际上在重置动画之前停止了动画。http://jsfiddle.net/NDtMW/

Answer 5

请澄清你的要求。你

• 想要动画连续播放，以便它们在不悬停时保持恒定运动？
• 是否希望它们在未悬停时处于向上运动状态？

顺便说一句，您的原始脚本仅适用于 IE。如果您只关心一种浏览器，请以后再说。IE 用户可能是 SO 上的少数。