CODEWITHSUNDEEP
classmouseeventjquery
weaponx
weaponx

Reputation: 145

mouse events to affect only one element of the secondary class (without using id) - jquery

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

http://jsfiddle.net/9XbKr/

How this can be achieved in the most practical way?

Upvotes: 0

Views: 64

Answers (2)

Rosario Micalizzi
Rosario Micalizzi

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

Black Sheep
Black Sheep

Reputation: 6694

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

Upvotes: 0

Related Questions