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

发布于 2024-10-31 19:18:45 字数 548 浏览 0 评论 0原文

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

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

$("#container").mouseout(

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

});

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

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

原文

I have a jQuery animation example here: http://jsfiddle.net/p7Eta/

I would like all the titles to pop out if the mouse is not within the container div at all. I have tried to do something like:

$("#container").mouseout(

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

});

But it does not work with the prior animations. What is the correct way to achieve this effect?

EDIT: I'd like something similar to this: http://jsfiddle.net/RE3XK/ but on mouseover I'd like the individual span titles to pop up like in the first example instead of having them all dissapear

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

送君千里 2024-11-07 19:18:45

你的意思是这样的。

检查工作示例 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
    });
});

You mean like this.

Check working example http://jsfiddle.net/p7Eta/8/

Update

$("#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
    });
});

回复收藏 0 原文

仅冇旳回忆 2024-11-07 19:18:45

最后，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'
    });
});

Finally, jsFiddle cooperated...

I'm doing something hacky, but it's the only way that I could get it to work. I had to add a .hover class to the currently hovered element, as my code doesn't work properly without it.
Just don't look at the code, and it'll look nice!

Here's a working example: http://jsfiddle.net/p7Eta/41/

And the code:

// 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'
    });
});

回复收藏 0 原文