jQuery:将类添加到元素的子元素

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

基本上我想要 div cell-container在鼠标悬停时突出显示背景。而且还要给 <img> 添加边框包含在。我怎样才能做到这一点？

Answer 1

为什么不直接在 CSS 中实现呢？

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

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