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在onmouseover上有突出显示的背景。但也要为其中包含的<img>添加边框。我怎样才能做到这一点？

Answer 1

为什么不在CSS中执行此操作？

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

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

Answer 2

btw $.hover同时提供mouseover和mouseout。

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

Answer 3

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

你必须改变你的CSS：

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

Answer 4

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

有关hover() here的更多信息。

Answer 5

怎么样：

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

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

只是css。

如果您只是添加样式类，您应该始终确保您在css中无法实现的目标（通常是这样）。

Answer 6

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

jQuery：将类添加到Element的Child

6 个答案: