Question

如果我有一组彼此相邻的2个div：

            <div class="selector outdoor">
            <div class="bar">
              <a href="#" class="firstOne"><p>Outdoor</p></a>
            </div><!--end of "bar"-->
        </div><!--end of "selector outdoor"-->
        <div class="selector hunter">
            <div class="bar">
              <a href="#" class="firstOne"><p>Hunting</p></a>
            </div><!--end of "bar"-->
        </div><!--end of "selector hunter"-->
        <div class="selector military">

如果我想在鼠标悬停.selector时创建一个悬停动作，那只触发div里面的.bar，我会在我的jquery看起来像什么？这就是我所拥有的。

$('.selector').hover(function ()  {
    TweenMax.to(this('.bar'), 1, {y:"-154px", ease:Power1.easeInOut});

});
$('.selector').mouseleave(function ()  {
    TweenMax.to(this('.bar'), 1, {y:"0", ease:Power1.easeInOut});
});

我知道我可以使用“这个用鼠标焦点触发对象，但我不知道如何使用子选择器只移动父div中的一个。

Answer 1

$(this).find('.bar')

将仅选择当前元素中的'.bar'元素。

我不熟悉TweenMax，但我认为你最终会得到这样的代码：

$('.selector').hover(function ()  {
    TweenMax.to($(this).find('.bar'), 1, {y:"-154px", ease:Power1.easeInOut});
});

如果TweenMax.to()函数期望第一个参数中的DOM元素而不是jQuery对象，则使用$(this).find('.bar').get(0)。

另请注意，.hover()和mouseleave()不是对立的。如果您向.hover()提供单个函数，它将在 mouseenter和mouseleave上执行。要做一些不同的事情，请输入和离开两个函数.hover()（并且根本不要调用mouseleave()）：

$('.selector').hover(function ()  {
    TweenMax.to($(this).find('.bar'), 1, {y:"-154px", ease:Power1.easeInOut});
},function ()  {
    TweenMax.to($(this).find('.bar'), 1, {y:"0", ease:Power1.easeInOut});
});

或使用.mouseenter()和.mouseleave()但不使用.hover()。

在mouseover上创建一个悬停操作，触发div中的元素

1 个答案: