>source

그래서 저는 웹 사이트를 만들고 있습니다. 나는 정상에서 슬라이더 메뉴가 있습니다. 단추 위로 마우스를 가져 가면 모든 것이 나타나지 만 내가 밖으로 나가면 사라지지 않습니다. My JS code에서는 버튼과 메뉴 사이에 작은 갭이 있기 때문에 SetTimeout ()에서 실종을 지연해야했습니다. 따라서 누군가가 타이머를 유지하면서 그것이 사라지게하는 방법을 알게 될 것입니다. 버튼에서 버튼으로 가면 사라질 때 사라지는 것이 사라질 때 사라질 것입니다. 미리 감사드립니다. 다음은 code가 있습니다.

<head>        <meta charset="utf-8">        <link rel="stylesheet" href="styles/index.css">        <link rel="shortcut icon" href="styles/favicon.ico.png" />        <title>Tandoor</title>    </head>    <body>        <section id="video-wrapper">            <ul id="navbar">                <li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">                    <a href="#">Menu</a>                    <ul id="menu-roll">                        <div id="design-line-menu-roll"></div>                        <li><a href="#">Polední menu</a></li>                        <li><a href="#">Jídelní lístek</a></li>                        <li><a href="#">Nápoje</a></li>                    </ul>                </li>            </ul>            <video id="video" autoplay muted loop>                <source src="styles/720p.mp4" type="video/mp4">            </video>            <div id="menu-wrapper">                <div id="logo-wrapper">                    <div id="h1-menu-tandoor">                        <h1>Tandoor</h1>                    </div>                    <div id="h1-menu-restaurace">                        <h1>Restaurace</h1>                    </div>                   <img src="styles/tndrlogo.jpg">                </div>            </div>            <div id="menu-roll">                <div id="design-line-menu-roll"></div>                <ul>                    <li>                        <a href="#">Polední menu</a>                    </li>                    <li>                        <a href="#">Menu</a>                    </li>                    <li>                        <a href="#">Nápojový lístek</a>                    </li>                </ul>            </div>        </section>     </body>  </html>```
Css:
:root{
    --backg-primary: #ffeaa7;
    --backg-islands: #2d3436;
    --nav-wrapper: #4d0404;
    --nav-wrapper-hover: #F79F1F;
    --menu-roll: rgba(247, 159, 31, 0.95);
}
*{
    margin: 0;
    padding: 0;
}
body{
    font-family: Verdana, Geneva, Tahoma;
    scroll-behavior: smooth;
}
#video-wrapper{
    height: 100vh;
    width: 100%;
}
#navbar{
    background-color: var(--nav-wrapper);
    position: fixed;
    width: 100%;
    transition: top 0.3s;
    top: 0;
    overflow: visible;
    z-index: 7;
}
#navbar a{
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    letter-spacing: 1.5px;
}
#navbar a:hover{
    transition: background-color .25s ease, color .25s ease;
    background-color: var(--nav-wrapper-hover);
    color: var(--nav-wrapper);
}
#logo-wrapper{
    background: white;
    margin: 0 auto;
    border: 3.85px solid var(--nav-wrapper);
    box-shadow: 0 0 10px #333;
    position: relative;
    animation: slideup 3s;
    width: 200px;
    height: 200px;
    border-radius: 45%;
}
@keyframes slideup{
    0%{
        top: 150px;
    }
    100%{
        top: 0;
    }
}
#menu-wrapper{
    width: 700px;
    height: 103px;
    background: var(--nav-wrapper);
    margin: 0 auto;
    border-radius: 50px;
    position: relative;
    z-index: 8;
}
#logo-wrapper img{
    border-radius: 45%;
    width: 190px;
    height: 190px;
    margin: 0 auto;
    padding-left: 4px;
}
#video{
    position: fixed;
    min-width: 100%;
    min-height: auto;
}
#menu-roll{
    position: absolute;
    z-index: 4;
    background: var(--nav-wrapper-hover);
    width: 150px;
    top: 60px;
    padding: 15px;
    left: 2%;
    display: none;
}
#menu-roll #design-line-menu-roll{
    height: 4px;
    width: 90%;
    margin: 0 auto;
    background: var(--nav-wrapper);
    margin-bottom: 10px;
}
#menu-roll a{
    text-decoration: none;
    font-size: 1.35em;
    text-align: left;
    color: var(--nav-wrapper);
    font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
    text-decoration: underline;
}
ul{
    list-style-type: none;
}
#h1-menu-tandoor{
    color: white;
    left: -100%;
    top: 12%;
    font-size: 1.5em;
    z-index: 1;
    position: absolute;
    opacity: 1.0;
    animation: textopacity 3.2s;
}
@keyframes textopacity{
    0%, 90%{
        opacity: 0.0;
    }
    100%{
        opacity: 1.0;
    }
}
#h1-menu-restaurace{
    color: white;
    left: 110%;
    top: 14.5%;
    font-size: 1.4em;
    z-index: 1;
    position: absolute;
    opacity: 1.0;
    animation: textopacitytwo 3.2s;
}
@keyframes textopacitytwo{
    0%, 90%{
        opacity: 0.0;
    }
    100%{
        opacity: 1.0;
    }
}
#information-section{
    background: var(--backg-primary);
    z-index: 5;
    position: relative;
}
#introduction{
    padding-top: 50px;
    z-index: 5;
    position: relative;
    text-align: left;
    overflow: hidden;
    width: 45%;
    padding: 50px;
    background: #444;
    margin: 10px;
    box-shadow: 0 0 10px #333;
}
#introduction h1{
    font-size: 3em;
    padding-bottom: 10px;
    color: #edf3f8;
}
#introduction h3{
    font-size: 1.75em;
    border-bottom: 2px solid var(--nav-wrapper);
    padding-bottom: 15px;
    color: var(--blend-in-text);
}
#introduction p{
    color: #edf3f8;
    font-size: 1.25em;
    padding: 15px 0;
    letter-spacing: 1px;
}
#divider{
    width: 100%;
    height: 40px;
    background: var(--nav-wrapper);
    position: relative;
    z-index: 6;
}
#intro-photos{
    position: relative;
    z-index: 6;
    height: 10px;
}
.first-photo{
    width: 36.5%;
    height: auto;
    left: 62%;
    position: relative;
    top: -400px;
    z-index: 4;
    box-shadow: 0 0 10px #333;
    border-radius: 50%;
    align-items: center;
    border: 1px solid rgb(255, 218, 104);
    background: rgb(255, 218, 104);
}
#services-info{
    height: 407px;
}
#services-photo{
    top: 50px;
}
@media screen and (max-width: 700px){
.first-photo{
    left: 12%;
    margin: 0 auto;
    top: 40px;
    width: 76.5%;
    padding-top: 15px;
    border-radius: 0;
}
#introduction{
    width: 60%;
    margin: 0 auto;
}
#divider{
    margin-bottom: 10px;
}
#services-info{
    height: 800px;
}
#services-photo{
    top: 470px;
    position: relative;
}
}
Js:
var timeout;
function mouseOver(){
    document.getElementById('menu-roll').style.display= 'block';
    timeout= setTimeout(function(){document.getElementById('menu-roll').style.display= 'none';}, 3000);
}
function mouseOut(){
    clearTimeout(timeout);
}

귀하의 질문을 명확히하십시오. 버튼을 이용하기 전에 모든 일이 보이지 않아야하므로 버튼을 제외한 흰색 페이지가 있으므로 원하는가?

biberman2021-04-22 04:17:11
  • 이전 arm : 저전력 모드 Entern.
  • 다음 javascript : 자동 완성은 기본값을 강조 표시하지 않습니다