Question

所以我有一个正在进行的练习网站，目前有两个页面相互链接。我已将其设置为当按下主页上的相应按钮时，“历史记录”页面将从右侧滑入。按下通向主页的按钮时，“历史记录”页面会向右滑动。

不幸的是，当“历史记录”页面再次被隐藏时，可以点击主页上的任何内容，就像有一个看不见的div位于顶部。究竟发生了什么，我该如何解决这个问题？准备好在这一行下面的很多代码。

主页HTML：

<body>
    <div id="Wrapper">
    <div id="Home">

        <div class="Box">
            <div id="PledisHover">
                <img class="Pledis" src="Pledis.png">
                    <img class="PledisHov" src="PledisHov.png">
        </div>

        <img class="SVT" src="SayTheName.png">

        <img class="Logo" src="Logo.png">

            <div id="HistHover" onClick="">
                <img src="HistButton.png" 
onmouseover="this.src='HistButtonHover5.png'"
onmouseout="this.src='HistButton.png'">
            </div>

            <div id="MembHover" onClick="">
                <img src="MemButton.png" 
onmouseover="this.src='MemButtonHov.png'"
onmouseout="this.src='MemButton.png'">
            </div>

            <div id="MedHover" onClick="">
                <img src="MedButton.png" 
onmouseover="this.src='MedButtonHov.png'"
onmouseout="this.src='MedButton.png'">
            </div>
    </div>

    <div id="Hist">
        <img id="HomeButton" src="Home.png" onmouseover="this.src='HomeHov.png'" onmouseout="this.src='Home.png'">
        <object id="Page" name="Page" type="text/html/css" data="SVTHist.html">
        </object>
    </div>

    <div id="Memb">
        <object id="Page" name="Page" type="text/html/css" data="SVTMemb.html"></object>
    </div>

    <div id="Med">
        <object id="Page" name="Page" type="text/html/css" data="SVTMed.html"></object>
    </div>
    </div>
    </body>

主页CSS：

html {
    width: 100%;
    height: 100%;
    }
body {
    margin: 0;
    padding: 0;
    }

    #Wrapper {
        height: 702px;
        width: 1364px;
        top: 0px;
        left: 0px;
        margin: 0;
        padding: 0;
        position: absolute;
        overflow: hidden;
         }

    #Hist, #Memb, #Med {
        height: 702px;
        width: 1364px;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0px;
        left: 1364px;
        }

    #Home {
        height: 702px;
        width: 1364px;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background: linear-gradient(#F293BF 50%, #EBEFF8 50%);
        }

    .Box {
        background-repeat: no-repeat;
        background-attatchment: fixed;
        background: linear-gradient(#94DBF7, #D2EAF7);
        height: 646px;
        width: 1202px;
        position: relative;
        left: 5.5%;
        top: 25px;
        }

        .Pledis, .PledisHov, .SVT, .Logo, #HistHover, #MembHover, #MedHover {
            position: absolute;
                    }

        #HistHover, #MembHover {
            top: 543px;
                   }

        #HistHover:hover {
            cursor: pointer;
                }

        .Pledis {
            top: 15%;
            left: 15%;
            }

            .PledisHov {
                top: 78px;
                left: 175px;
                transform: rotate(-15deg);
                   }

    .PledisHov, #PledisHover:hover .Pledis {
        display: none;
                    }

    .Pledis, #PledisHover:hover .PledisHov {
        display: block;
                    }

        .SVT {
            top: 10%;
            left: 20%;
            }

        .Logo {
            top:48%;
            left: 37%;
            }

    #HistHover {
        left: 25%;
           }

    #MembHover {
        left: 42%;
           }

    #MedHover {
        top: 553px;
        left: 59%;
          }

    #Page {
        height: 702px;
        width: 1364px;
        }

        .animate {
            -webkit-animation-name: Slide;
            -webkit-animation-duration: 1.5s;
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-iteration-count: 1;
            -moz-animation-iteration-count: 1;
            }

        @-webkit-keyframes Slide {
            from {transform: translateX(0px)}
            to {transform: translateX(-1364px)}
             }

        @keyframes Slide {
            from {transform: translateX(0px)}
            to {transform: translateX(-1364px)}
          }


        .animate2 {
            -webkit-animation-name: SlideOut;
            -webkit-animation-duration: 1.5s;
            }

        @-webkit-keyframes SlideOut {
            from {transform: translateX(0px)}
            to {transform: translateX(1364px)}
             }

        @keyframes SlideOut {
            from {transform: translateX(0px)}
            to {transform: translateX(1364px)}
          }

    #HomeButton {
        position: absolute;
        top: 2px;
        left: 9px;
          }

主页Javascript：

document.getElementById('HistHover').addEventListener('click', function() {
            document.getElementById('Hist').classList.add('animate');                                        });                                        

    document.getElementById('MembHover').addEventListener('click', function() {
            document.getElementById('Memb').classList.add('animate');
                                         });

    document.getElementById('MedHover').addEventListener('click', function() {
        document.getElementById('Med').classList.add('animate');
                                         });

    document.getElementById('HomeButton').addEventListener('click', function() {
            document.getElementById('Hist').classList.add('animate2');
                                         });

编辑：@Jaromanda的回复告诉我我需要知道的事情。我从“历史记录”页面中删除了“主页”按钮，而是将其插入到包含“历史记录”页面对象的div中。对象不再留在后面使按钮不可点击。这个问题现在已经解决了。我更新了主页代码以反映我的更改，并删除了历史页面代码，因为它不再相关。

动画页面转换工作不正确

0 个答案: