class - 鼠标事件仅影响二级类的一个元素（不使用 id） - jquery

Question

我有多个 div class="aaa"- 每个都包含一些带有class="bbb".

当我鼠标输入一个 div 时，我需要更改 div 的背景和该 div 内部文本的颜色。我需要在不使用单个 id的情况下实现这一点（因为有很多 div）。

现在我只知道如何实现第一部分，但我不知道第二部分：

$('.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');
});

如果具有 class 的元素是具有 class 的元素的直接后代，则可以使用.children()而不是。.find().bbb.aaa

Answer 2

看演示

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