Reputation: 145
I have multiple divs with class="aaa"
- each contains some text with class="bbb"
.
When I mouseenter one div, I need to change div's background and color of the text which is inside of that div. I need to achieve this without using individual ids (because there are many divs).
Right now I only know how to achieve the 1st part, but I don't know the 2nd:
$('.aaa').mouseenter(function () {
$(this).css('background', '#555555');
$('.bbb').css('color', 'white');
});
$('.aaa').mouseleave(function () {
$(this).css('background', '#cccccc');
$('.bbb').css('color', 'black');
});
How this can be achieved in the most practical way?
Upvotes: 0
Views: 64
Reputation: 26
I am not sure if this is the most practical way, but it should work.
$('.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');
});
You can use .children()
instead of .find()
if the elements with class .bbb
are direct descendants of those with class .aaa
.
Upvotes: 1
Reputation: 6694
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;
}
Upvotes: 0