我正在尝试将一组 3 张图片分层，以便它们都在彼此之上。当我“mouseenter”时，我希望最上面的照片淡出，然后当我“mouseleave”时，我希望它重新出现。我得到了这个功能。然后我希望能够在“mouseenter”之后单击并使第二张照片消失，以便我可以看到第三张照片。之后，我希望所有照片都重新出现，并且无论我鼠标输入、鼠标离开和单击多少次，该功能都能继续工作。我已经让它工作了，所以顶部的照片消失并重新出现，然后当我单击时我看到第三张照片，但是当我鼠标离开时，我看到第一张照片，当我再次鼠标进入时没有任何反应。有人可以帮我弄清楚如何完成我想做的任务吗？到目前为止，我将其作为我的 HTML：
<html>
<head>
<title>this is a title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="programs.js"></script>
<link rel="stylesheet" type="text/css" href="10_10.css">
</head>
<body>
<div class="colosseum">
<img class="colosseum" src="http://library.thinkquest.org/CR0210200/ancient_rome/colosseum3.jpg"/>
</div>
<div class="colosseumRest">
<img class="colosseumRest" src="http://www.robinurton.com/history/ancient/rome/ColoAbove.jpg"/>
</div>
<div class="colosseumNow">
<img class="colosseumNow" src="http://hbarbosahistorybuff.edublogs.org/files/2010/11/colosseum2-1lgbsp7.jpg"/>
</div>
</body>
这是我的CSS：
.colosseumNow{
min-width:400px;
min-height:400px;
max-width:400px;
max-height:400px;
margin-top:-300px;
}
.colosseumRest{
min-width:400px;
min-height:400px;
max-width:400px;
max-height:400px;
margin-top:-200px;
}
.colosseum{
min-width:400px;
min-height:400px;
max-width:400px;
max-height:400px;
postition:absolute;
}
这是我的javascript：
$(document).ready(function(){
$('.colosseumNow').mouseenter(function(){
$(this).fadeTo('slow',0);
});
$('.colosseumNow').mouseleave(function(){
$(this).fadeTo('slow',1);
});
$('.colosseumNow').click(function(){
$('.colosseumRest').fadeTo('slow',0);
});
});