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

「これを使用してマウス フォーカスでオブジェクトをトリガーできることはわかっていますが、子セレクターを使用して親 div 内の 1 つだけを移動する方法がわかりません。

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()関数が最初のパラメーターに jQuery オブジェクトではなく DOM 要素を期待している場合は、$(this).find('.bar').get(0).

.hover()とmouseleave()は反対ではないことにも注意してください。単一の関数を指定すると、 mouseenter と mouseleaveの両方.hover()で実行されます。入るときと出るときに何か違うことをするには、2 つの関数を指定します (そして、まったく呼び出さないでください)。.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});
});

または and を使用しますが、 は使用.mouseenter()し.mouseleave()ません.hover()。

于 2013-04-23T21:33:20.500 に答える