我有 6 张图片，在悬停时，每张图片都会被另一个淡入淡出（使用 jQuery）的图片替换并获取初始图片。
问题是当图像淡出时，它会在原始图像之下而不是在它之上。
由于淡入/淡出效果很好，我认为这个问题属于我的 css 代码：
CSS：
#puzz {
border-color:#000000;
background-color:#00CC33;
position:fixed;
left:20%;
top:13%;
width:900px;
height:650px;
}
li {
list-style:none;
float:left;
list-style:none;
padding:8px;
margin:10px;
line-height:10px;
width:218px;
height:218px;
overflow:hidden;
background:#99CCFF;
/*For IE9 compatibility*/
behavior: url(border-radius.htc);
border-radius: 8px;
}
.fade div {
position:absolute;
top:auto;
left:auto;
display: none;
}
HTML：
<div id="puzz">
<ul>
<li>
<div class="fade"><img src="img7.jpg" />
<div><img src="img8.jpg" /></div>
</div>
</li>
<li>
<div class="fade"><img src="img2.jpg" />
<div><img src="img5.jpg" /></div>
</div>
</li>
<li>
<div class="fade"><img src="img3.jpg" />
<div><img src="img4.jpg" /></div>
</div>
</li>
<li>
<div class="fade"><img src="img4.jpg" />
<div><img src="img3.jpg" /></div>
</div>
</li>
<li>
<div class="fade"><img src="img5.jpg" />
<div><img src="img2.jpg" /></div>
</div>
</li>
<li>
<div class="fade"><img src="img6.jpg" />
<div><img src="img1.jpg" /></div>
</div>
</li>
</ul>
</div>
这是我得到的：
编辑：
这是我使用的 jQuery 脚本：
$(document).ready(function () {
// find the div.fade elements and hook the hover event
$('div.fade').hover(function () {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}
}, function () {
// on hovering out, fade the element out
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(30);
}
});
});