使用jQuery，你如何改变悬停在div内的图像？

我有以下jQuery代码来替换图像时，鼠标悬停在上面，但它似乎并没有工作。下面的代码有什么问题？使用jQuery，你如何改变悬停在div内的图像？

$(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>

来源

2010-04-24 leora

与您的问题无关的注释：HTML中的ID可能不以数字开头。 – RoToRa 2010-04-26 08:43:39

可以重新排列了一点，像这样：

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

来源

2010-04-24 11:51:47

-1因为没有发布简单/快速的解决方案，也建议在后半部分做的事情做完了OP – 2010-04-24 12:04:35

@phpBOY - 我发布了*最佳*解决方案在这种情况下，简单的解决方案并不总是**正确**一个。看到另一个答案，它根本解决不了问题，我在答案中详细描述了它，以及它如何解决问题。 – 2010-04-24 12:06:33

看到我的回答 – leora 2010-04-24 12:15:52

试试这个：

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

来源

2010-04-24 11:50:40 Sarfraz

这是不正确的，他的选择器已经是''，你正在寻找'

' – 2010-04-24 11:58:49

这似乎不工作 – leora 2010-04-24 11:59:18

@oo：请看我更新的答案。 – Sarfraz 2010-04-24 12:00:13

其实，我的原代码好吧，但我只是意识到图像和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"); 
    } 
});

来源

2010-04-24 12:15:05 leora

你不能做这样的效果虽然。如果您想要更改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();

来源

2010-04-24 13:26:56 XGreen

使用jQuery，你如何改变悬停在div内的图像？

回答

相关问题