jquery - クラス内の特定の要素の選択

Question

私はjQueryの初心者であり、これを解決しようと少し苦労しています。

だから私はこれに似たものを持っています：

<div class="app">
<div class="app-text"></div>
</div>

<div class="app">
<div class="app-text"></div>
</div>

jqueryを使用して.app-textの色を変更したいのですが、.app-textを使用すると、他のdivのapp-textも変更されるので（明らかに）、.app-textだけを変更するにはどうすればよいですか？ホバーされている.appdiv内。.app divにカーソルを合わせると、イベントがトリガーされる必要があります。

（同じページにかなりの数の.app divがあります）

Answer 1

あなたが使用することができます$(selector, context)：

$('.app').hover(function(){
   $('.app-text', this).foo()
  }, function(){
   $('.app-text', this).bar()
})

Answer 2

$('.app').hover(function() {
    var text = $(this).find('.app-text');
    ...
});

または、CSS3互換ブラウザの場合：

.app:hover .app-text {
    color: red;
}

Answer 3

でホバーされた要素にアクセスできますthis。

次のようなものを試してください。

$('.app').hover(function(){ //function on hover-in
                  $('.app-text', this).css('color', 'red');
               }, 
               function(){ //function on hover-out
                  $('.app-text', this).css('color', 'black');
               });