Jquery图像叠加？ [英] Jquery image overlay?

问题描述

我想使用jquery在另一个图片的右上角覆盖一个图片。

I'm looking to overlay an image in the right hand corner on another image using jquery.

基本上我想让第二张图片显示在另一张图片上当用户的鼠标悬停在图像上方时，右侧角落，然后当它们停止在它上方时消失。我如何实现这个与Jquery？

Basically I want the 2nd image to appear over the other image in the right hand corner when the user's mouse hovers above the image and then vanish when they stop hovering over it. How would I achieve this with Jquery?

推荐答案

@Senad是非常正确的，你不需要jQuery。但是，如果您有更复杂的情况，并且正在寻找类似的功能，请尝试：

@Senad is quite right, you don't need jQuery for that. However, if you have a more complicated situation and are looking for similar functionality, try:

将它们包含在包含元素中。将包含元素设置为 position：relative
将覆盖图像设置为 position：absolute; top：0; left：0; ，并根据你喜欢的样式的高度和宽度...然后使用jQuery来处理悬停事件...
HTML：

Wrap them in a containing element. Set the containing element to position:relative Set the overlay image to position:absolute; top:0; left:0; and style the height and width as you like...then use jQuery to handle the hover event... 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/

这篇关于Jquery图像叠加？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！