鼠標事件隻影響第二類的一個元素（不使用id） - jquery

Question

我有多個div與class="aaa" - 每個包含一些文本class="bbb"。

當我mouseenter一個div時，我需要更改div的背景和該div內的文本的顏色。我需要達到這個而不使用個人ID（因爲有很多div）。

現在我只知道如何實現第1部分，但我不知道第二：

$('.aaa').mouseenter(function() { 
    $(this).css('background', '#555555'); 
    $('.bbb').css('color', 'white'); 
}); 
$('.aaa').mouseleave(function() { 
    $(this).css('background', '#cccccc'); 
    $('.bbb').css('color', 'black'); 
}); 

http://jsfiddle.net/9XbKr/

這怎麼能在最實用的方式來實現？

Answer 1

我不知道這是否是最實用的方法，但它應該工作。

$('.aaa').mouseenter(function() { 
    $(this).css('background', '#555555'); 
    $(this).find(".bbb").css('color', 'white'); 
}); 
$('.aaa').mouseleave(function() { 
    $(this).css('background', '#cccccc'); 
    $(this).find(".bbb").css('color', 'black'); 
}); 

可以使用.children()代替.find()如果與.bbb類的元素是那些.aaa類的直接後裔。

Answer 2

SEE DEMO

jQuery的

$(document).on({ 

    mouseenter: function() { 

     $(this).addClass("green"); 

    }, 
    mouseleave: function() { 

     $(this).removeClass("green"); 
    } 

}, ".aaa"); 

CSS

.red { 
    width: 50px; 
    height:50px; 
    background-color: red; 
} 

.green{ 
    background-color: green; 
}