javascript - Jquery 图像叠加？

Question

我希望使用 jquery 将右上角的图像叠加到另一幅图像上。

基本上，当用户的鼠标悬停在图像上方时，我希望第二张图像出现在右上角的另一张图像之上，然后当他们停止悬停在图像上时消失。我将如何使用 Jquery 实现这一目标？

Answer 1

@Senad 说得很对，您不需要 jQuery。但是，如果您遇到更复杂的情况并且正在寻找类似的功能，请尝试:

将它们包裹在一个包含元素中。将包含元素设置为 position:relative 将叠加图像设置为 position:absolute;顶部:0； left:0; 并根据需要设置高度和宽度的样式...然后使用 jQuery 处理悬停事件... HTML:

<div>
    <img id="main" src="myimg" />
    <img id="overlay" src="myimg"
    /></div>

CSS:

    div {
     position:relative;   
    }
    #main {   
        width:256px;
     div {
 position:relative;   
}

#main {   
    width:256px;
    height:256px;
}
#overlay {
 position:absolute;
  height:100px;
   width:100px;
   top:0;
   left:0; 
}

代码:

$(document).ready(function() {
    $("#main").mouseenter(function() {
               $("#overlay").show();
    });
    $("#main").mouseleave(function() {
               $("#overlay").hide();
    });
});

请在此处查看工作示例:http://jsfiddle.net/jsney/10/