CODEWITHSUNDEEP
jqueryhtmlcss
Aaron
Aaron

Reputation: 1976

jQuery: Add Class to Element's Child

HTML:

<div class="cell-container">
  <img src="image.png" class="thumbnail" />
</div>

CSS:

.hover {
  background-color: silver;
}
.hover-image {
  border: 1px solid #000;
}

jQuery:

$(".cell-container").mouseover(function() {
    $(this).addClass("hover");
});

$(".cell-container").mouseout(function() {
    $(this).removeClass("hover");
});

Basically I want the div cell-container to have a highlighted background onmouseover. But also add a border to the <img> contained within. How can I achieve this?

Upvotes: 3

Views: 7752

Answers (6)

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

$(".cell-container").hover(
  function () {
    $(this).addClass("hover");
    $(this).children("img").addClass("img-hover");
  }, 
  function () {
    $(this).removeClass("hover");
    $(this).children("img").removeClass("img-hover");
  }
);



.hover-image {
  border: 1px solid #000;
}

Upvotes: 0

Bassam Mehanni
Bassam Mehanni

Reputation: 14944

How about:

.cell-container:hover
{
  background-color: silver;
}

.cell-container:hover img
{
  border: 1px solid #000;
}

just css.

If you are just adding styling classes you should always make sure that what you are trying to achieve is not possible in css (it usually is).

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

DEMO

$(".cell-container").mouseover(function() {
    $(this).addClass("hover").find('img').addClass('hover-image');
});

$(".cell-container").mouseout(function() {
    $(this).removeClass("hover").find('img').removeClass('hover-image');
});

And you have to change your CSS:

.hover-image {
  border: 1px solid #000;
}

Upvotes: 2

Aleks G
Aleks G

Reputation: 57316

Why not just do this in CSS?

div.cell-container:hover {
  background-color: silver;
}

div.cell-container:hover img.thumbnail {
  border: 1px solid #000;
}

Upvotes: 7

Purag
Purag

Reputation: 17061

$(".cell-container").hover(function(){ // using hover for shorter syntax
    $(this)
        .addClass("hover") // add hover class on mouseover
        .find("img") // select the child image
            .addClass("hover-image"); // add hover class
}, function(){ // mouseout function
    $(this)
        .removeClass("hover") // remove hover class
        .find("img") // select the child image again
            .removeClass("hover-image"); // remove hover class
});

More on hover() here.

Upvotes: 1

Maxim Krizhanovsky
Maxim Krizhanovsky

Reputation: 26699

btw $.hover provides both mouseover and mouseout.

$(".cell-container").hover(function() {
    $(this).addClass("hover");
    $(this).children('img').addClass('hover-image');
}, function() {
    $(this).removeClass("hover");
    $(this).children('img').removeClass('hover-image');
});

Upvotes: 4

Related Questions