如何解决jQuery的图像叠加？
| 我正在使用jquery将右上角的图像叠加到另一张图像上。 基本上，我希望当用户的鼠标悬停在图像上方时，第二个图像显示在右上角的另一个图像上，然后在他们停止将鼠标悬停在其上方时消失。我将如何使用Jquery做到这一点？解决方法
@Senad是非常正确的，您不需要jQuery。但是，如果情况更复杂并且正在寻找类似的功能，请尝试：
将它们包装在一个包含元素中。将包含元素设置为
position:relative
position:absolute; top:0; left:0;
<div>
<img id=\"main\" src=\"myimg\" />
<img id=\"overlay\" src=\"myimg\"
/></div>
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();
});
});
<a href=\"#\" class=\"my-overlay\">My Overlay</a>
a.my-overlay {
background: url(\'/images/first-image.jpg\') no-repeat;
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url(\'/images/second-image.jpg\') no-repeat; }
$(\'div .firstImage\').hover(function(){
$(\'.secondImage\').slideToggle();
});
<div class=\"merchImg\">
<a href=\"#\" class=\"hoverTrigger\"><img src=\"_img/_new-store/item.png\" /></a>
<a href=\"#\" class=\"hoverTrigger\"><img class=\"overlay hide\" src=\"_img/_new-store/overlay.png\" /></a>
</div>
.merchImg {
position: relative;
}
.merchImg .overlay {
position: absolute;
top:0;
left:0;
}
$(\".hoverTrigger\").mouseenter(function() {
$(this).parent().find(\'a .overlay\').show();
});
$(\".hoverTrigger\").mouseleave(function() {
$(this).parent().find(\'a .overlay\').hide();
});
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head runat=\"server\">
<title></title>
<link rel=\"stylesheet\" media=\"screen\" type=\"text/css\" href=\"Styles/ImageOrverlay.css\" />
<script type=\"text/javascript\" src=\"Scripts/jquery-1.8.3.min.js\"></script>
<script type=\"text/javascript\" src=\"Scripts/jquery.metadata.js\"></script>
<script type=\"text/javascript\" src=\"Scripts/jquery.ImageOverlay.js\"></script>
</head>
<body>
<form id=\"form1\" runat=\"server\">
<h1>
jQuery Image Overlay</h1>
<fieldset>
<legend><b>Without any options : </b></legend>
<ul id=\"firstGallery\" class=\"image-overlay\">
<li><a href=\"http://www.yahoo.com\">
<img alt=\"Palm Tree\" src=\"Images/palmtree.jpg\" />
<div class=\"caption\">
<h3>
Write a Title Here</h3>
<p>
Put a Caption Here</p>
</div>
</a></li>
<li><a href=\"http://www.google.com\">
<img alt=\"Iguana\" src=\"Images/iguana.jpg\" />
<div class=\"caption\">
<h3>
Another Title</h3>
<p>
click for more info</p>
</div>
</a></li>
<li><a href=\"http://www.google.com\">
<img alt=\"Ceynote\" src=\"Images/ceynote.jpg\" />
<div class=\"caption\">
<h3>
Just a Title Here</h3>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>With options set (border_color,overlay_origin,overlay_color,and overlay_text_color,overlay_speed,overlay_speed_out) : </b></legend>
<ul id=\"secondGallery\" class=\"image-overlay\">
<li><a href=\"http://www.mozilla.com/\">
<img alt=\"firefox\" src=\"Images/firefox-512-200x200.png\" />
<div class=\"caption\">
<h3>
Get Firefox</h3>
</div>
</a></li>
<li><a href=\"http://www.mozilla.com/\">
<img alt=\"jungle\" src=\"Images/jungle.jpg\" />
<div class=\"caption\">
<h3>
Tall Overlay</h3>
<p>
The overlay height is based upon the content it contains</p>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>Advanced Usage,utilizing the <a href=\"http://plugins.jquery.com/project/metadata\">
metadata plugin</a> : </b></legend>
<ul id=\"thirdGallery\" class=\"image-overlay { overlay_speed: \'slow\' }\">
<li><a class=\"{ animate: false,overlay_origin: \'top\' }\" href=\"http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/\">
<img alt=\"bamboo\" src=\"Images/bamboo.jpg\" />
<div class=\"caption\">
<h3>
Connect to a Lightbox</h3>
<p>
overlay origin is overridden,not animated</p>
</div>
</a></li>
<li><a class=\"{ overlay_speed: \'fast\',overlay_speed_out: \'slow\' }\" href=\"http://www.mozilla.com\">
<img alt=\"Ships\" src=\"Images/josh-ships.jpg\" />
<div class=\"caption\">
<h3>
'Ships' by Josh Neal</h3>
<p>
different in/out speeds</p>
</div>
</a></li>
<li><a class=\"{ border_color: \'green\',overlay_color: \'#ccffcc\',overlay_text_color: \'green\',overlay_speed: \'fast\',always_show_overlay: true }\"
href=\"http://www.mozilla.com/\">
<img alt=\"cypress\" src=\"Images/cypress.jpg\" />
<div class=\"caption\">
<h3>
Digg This!</h3>
<p>
colors,overlay speed overridden,overlay always open</p>
</div>
</a></li>
</ul>
</fieldset>
<script type=\"text/javascript\">
// JavaScript for the Image Overlay galleries.
$(\"#firstGallery\").ImageOverlay();
$(\"#secondGallery\").ImageOverlay({ border_color: \"#FF8000\",overlay_color: \"#610B38\",overlay_origin: \"top\",overlay_text_color: \"#FF8000\",overlay_speed_out: \'slow\' });
$(\"#thirdGallery\").ImageOverlay();
</script>
</form>
</body>
</html>
.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link,.image-overlay a:visited,.image-overlay a:hover,.image-overlay a:active { text-decoration: none; }
.image-overlay a:link img,.image-overlay a:visited img,.image-overlay a:hover img,.image-overlay a:active img { border: none; }
.image-overlay a
{
margin: 9px;
float: left;
background: #fff;
border: solid 2px;
overflow: hidden;
position: relative;
}
.image-overlay img
{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.image-overlay .caption
{
float: left;
position: absolute;
background-color: #000;
width: 100%;
cursor: pointer;
/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
longtime IE abuse of it,so opacity is not offically supported - use at your own risk.
To play it safe,disable overlay opacity in IE. */
/* For Firefox/Opera/Safari/Chrome */
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";
}
.image-overlay .caption h1,.image-overlay .caption h2,.image-overlay .caption h3,.image-overlay .caption h4,.image-overlay .caption h5,.image-overlay .caption h6
{
margin: 10px 0 10px 2px;
font-size: 20px;
font-weight: bold;
padding: 0 0 0 5px;
}
.image-overlay p
{
text-indent: 0;
margin: 10px;
font-size: 1em;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。