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在悬停的 .app div 中。悬停在 .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');
               });