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

Answer 2

试试这个：

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

Answer 3

实际上，我的原始代码还可以，但我刚刚意识到图像和div是动态放置的。因此，我需要使用下面的直播活动。

（我意识到这一点后，一些好的答案也没有用，这没有任何意义。）

$('div.delete img').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $(this).attr("src", "../../images/comment-del-hover.png");
    } else {
         $(this).attr("src", "../../images/comment-del.png");
    }
});

Answer 4

你不能做这样的效果。如果您想要更改src并且还能够为其设置动画，请执行以下操作：

$("#clone_el").css("z-index",2);
ele = $("#clone_el").clone().css({position:"relative","top":"-"+$("#clone_el").eq(0).height()+"px","z-index":"1"}).attr("src","/path/to/new/src");

$("#clone_el").after(ele).fadeOut();

使用jQuery，如何在div内部悬停时更改图像？

4 个答案: