jquery - 使用 jQuery，如何更改 div 内悬停时的图像？

Question

我有以下 jQuery 代码，用于在您将鼠标悬停在其上时替换图像，但它似乎不起作用。下面的代码有什么问题？

$(function() {
$("div.delete img")
    .mouseover(function() {
        $(this).attr("src", "../../images/comment-hover-del.png");
    })
    .mouseout(function() {
        $(this).attr("src", "../../images/comment-del.png");
});
 });

这是我的 HTML:

<div class="delete" id="26"><img src="../../images/comment-del.png" border="0"></div>

Answer 1

您可以稍微重新排列它，如下所示:

$(function() {
  $("div.delete").hover(function() {
     $("img", this).attr("src", "../../images/comment-hover-del.png");
  }, function() {
     $("img", this).attr("src", "../../images/comment-del.png");
  });
});

这是在 div 悬停时触发的，因为图像变化时可能会出现轻微的闪烁，导致图像折叠和 mouseout在加载下一张图像之前触发。我将宽度/高度分配给 <div>如果您使用上面的方法来防止此行为，或者如果您使用当前的方法，则对图像进行处理。

或者，您可以给出 div一个background-image css 属性和 <div>本身是一个悬停(完全删除 <img>)并在 CSS 中完成这一切，如下所示:

div.delete { 
  width: 100px; 
  height: 100px; 
  background-image: url('../../images/comment-del.png') center;
}
div.delete:hover { 
  background-image: url('../../images/comment-hover-del.png') center;
}