Question

我正在尝试将一组3张图片分层，以便它们全部在彼此之上。当我“mouseenter”我希望顶部照片淡出时，然后当我“mouseleave”时，我希望它重新出现。我得到了这个功能。然后我希望能够在“mouseenter”之后点击并使第二张照片消失，以便我可以看到第三张照片。之后我希望所有照片都重新出现，并且无论我多少次使用mouseenter，mouseleave和click，该功能都会继续工作。我已经让它工作，以便顶部照片消失并重新出现然后当我点击时我看到第三张照片，但是当我鼠标移动时，我看到第一张照片，当我再次进入鼠标时没有任何反应。有人可以帮我弄清楚如何完成我想做的任务吗？到目前为止，我将此作为我的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);
});

    });

Answer 1

我能想到的简单方法是制作一个父母div然后使用兄弟姐妹使用

淡入或淡出所有孩子

$（兄弟姐妹）.fadeTo（ '慢'，1）

http://api.jquery.com/siblings/

在jQuery上使用.click和.fadeTo

1 个答案: