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

在类中选择特定元素

3 个答案: