[JS] javascript mouseover, mouse out

져니져니95 2021. 3. 29. 17:06

2020.03.26(금)

블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열한번째날

오늘은 자바스크립트로 마우스가 올라가면 메뉴바가 튀어나오고, 마우스가 나가면 메뉴바가 사라지는걸 만들어 보았음

mouseover : 해당객체에 마우스가 올라갔을때 효과 나타내기

mouseout : 해당 객체에 마우스가 나갔을때 효과 나타내기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./menu.css">
</head>

<body>
    <div id="wrap">
        <div id="header">
            <h2 id="logo">
                <img src="http://www.kiweb.or.kr/images/main_new/logo_new_2018.png">
            </h2>
            <div id="gnb" onmouseover = "over()" onmouseout="out()">
                <ul>
                    <li><a href="#">학교소개</a></li>
                    <li><a href="#">교육과정</a></li>
                    <li><a href="#">취업정보</a></li>
                    <li><a href="#">커뮤니티</a></li>
                    <li><a href="#">상담신청</a></li>
                </ul>
            </div>
            <div class="snb_area" onmouseover="over()" onmouseout="out()">
                <h2>word</h2>
                <ul>
                    <li><a href="#">인사말</a></li>
                    <li><a href="#">연혁</a></li>
                    <li><a href="#">교직원소개</a></li>
                    <li><a href="#">시설소개</a></li>
                    <li><a href="#">오시는길</a></li>
                </ul>
                <ul>
                    <li><a href="#">과정안내</a></li>
                </ul>
                <ul>
                    <li><a href="#">취업자인터뷰</a></li>
                    <li><a href="#">취업현황</a></li>
                    <li><a href="#">포트폴리오</a></li>
                </ul>
                <ul>
                    <li><a href="#">공지사항</a></li>
                    <li><a href="#">수강후기</a></li>
                    <li><a href="#">KI이야기</a></li>
                    <li><a href="#">KI기자단</a></li>
                    <li><a href="#">교수칼럼</a></li>
                </ul>
                <ul>
                    <li><a href="#">상담게시판</a></li>
                    <li><a href="#">지원하기</a></li>
                    <li><a href="#">자주묻는질문</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function over(){
            snb = document.querySelector('.snb_area')
            snb.className = 'snb_area navi'
        }

        function out(){
            snb = document.querySelector('.snb_area')
            snb.className = 'snb_area navi2'
        }
    
    </script>
</body>

</html>

*{ /*전체 엘리먼트를 지정*/
    margin: 0;
    padding: 0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
    color:#333;
}

img{
    display: block;
    line-height: 0;
}

#wrap{
    width: 100%;
}

#header{
    width: 1200px;
    height: 400px;
    margin: 0 auto;
}

#header > #logo{
    float: left;
    width: 200px;
}

#header > #gnb{
    float: left;
}

#header > #gnb > ul > li{
    float: left;
}

#header > #gnb > ul > li > a{
    display: inline-block;
    width: 180px;
    text-align: center;
    padding: 20px 0;
}

#header > .snb_area{
    clear:both;
    height: 0px;
    overflow: hidden;
    background: palegreen;
    opacity: 0.5;
}

#header > .snb_area.navi{
    animation: slider 0.5s;
    animation-fill-mode: forwards;
}

#header > .snb_area.navi2{
    animation: slider2 0.5s;
}

@keyframes slider{
    from{
        height: 0px;
    }to{
        height: 150px;
    }
}

@keyframes slider2{
    from{
        height: 150px;
    }to{
        height: 0px;
    }
}
.snb_area > h2{
    float: left;
    width: 200px;
}

.snb_area > ul{
    float: left;
    width: 180px;
}
.snb_area > ul > li{
    text-align: center;
    
}

.snb_area > ul > li> a{
    display: block;
    margin-top: 7px;
}

[JS] javascript mouseover, mouse out

*결과물