jquery - jQuery悬停多个项目

Question

所以我有四个相邻的圆圈，当您将鼠标从一个移到另一个时，此代码将激活。但我只希望它在您离开/进入任何圆圈时激活，而不是在您从一个 .circle 移动到另一个时激活。谢谢各位！

 $('.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 的情况下，我猜您需要将所有 circle 类元素包装在容器中，然后将悬停事件放在容器上。所以像

<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 结构就很难判断。