jQuery : Ajouter une classe à l'enfant d'un élément

Question

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

En gros, je veux que le div cell-container pour que l'arrière-plan soit mis en évidence au passage de la souris. Mais ajoutez également une bordure à la <img> qu'il contient. Comment puis-je y parvenir ?

Answer 1

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