0

如果我有一组彼此相邻的 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});
});

我知道我可以使用“this”来触发具有鼠标焦点的对象，但我不知道如何使用子选择器仅移动父 div 内部的一个。

4

1 回答 1

2 
$(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()and.mouseleave()但不是.hover().

于 2013-04-23T21:33:20.500 回答