Javascript 使用jQuery时图像覆盖图像？

所以，我想把图像置于图像之上。第二个在上角。 我想用jQuery实现这一点

$("#result").on({
mouseenter:function(){

$("#article").attr("src", "button2.png");  

 }, ".button");
 });

---

我想，当有人悬停在文章上显示图像以显示更多内容时，就像其他人所说的，您可以只使用CSS。我认为最简单的方法是将一张图片作为背景，然后在上面放另一张图片：

请参见

HTML:

===替代解决方案====

如果必须使用

img

标签，则可以使用以下选项：

请参见

HTML:

---

您将需要2个img标记，然后使用css将其中一个覆盖到另一个标记上。如果我是正确的，您可能可以使用纯css使用

：hover

和子选择器来实现这一点，这应该更有效。我相信你可以使用绝对/相对定位来定位图像。你的HTML是什么样子的？我在jQuery中没有使用hover func。我用的是“on”。正如@BrandonAnzaldi所说的，用CSS处理这个问题会更加有效

<div class="image1">
    <img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image2"/>
</div>

.image1 {
    width: 650px;
    height: 433px;
    background: url("http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg");
}
.image1:hover .image2 {
    display: block;
}
.image2 {
    display: none;
    width: 100px;
    height: 80px;
}

<img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image1"/>
<img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image2"/>

.image1 {
    position: absolute;
}
.image1:hover + .image2 {
    display: block;
}
.image2 {
    display: none;
    width: 100px;
    height: 80px;
    position: absolute;
    z-index: 100;
}