Question

所以我有四个圆圈彼此相邻，当你将鼠标从一个移动到另一个时，此代码会激活。但是我只希望它在你离开/移开任何一个圆圈时激活，而不是当你从一个圆圈移动到另一个圆圈时激活。谢谢大家！

 $('.circle').hover(
    function () {
        $(this).parent().animate({marginLeft: '-=25px'}, 1000);
    },
    function () {
        $(this).parent().stop(true, true).animate({marginLeft: '+=25px'}, 1000);
    }
 );

Answer 1

看看这个小提琴...... http://jsfiddle.net/WxNdN/3/

e.relatedTarget应该为您提供已输入或离开的元素。在开始制作动画之前，请检查它的类以查看它是否为圆形。

$('.circle').hover(
    function (e) {

        if(!$(e.relatedTarget).hasClass('circle'))
        {
            console.log('entering');
        }
    },
    function (e) {

        if(!$(e.relatedTarget).hasClass('circle'))
        {
            console.log('leaving');
        }
    }
 );

Answer 2

没有看到html，我猜你需要将所有的圆类元素包装在容器中，然后将悬停事件放在容器上。像

这样的东西

<div id="container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

然后

$('#container').hover(functions...)

然后你可能不得不改变$(this).parent()但是如果没有看到你当前的HTML结构就很难说。

jQuery悬停在多个项目上

2 个答案: