Mouse enter/leave

Namiya·2025년 7월 16일
JavaScript 연습

목록 보기
27/27
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../reset.css">
    <title>Mouse Enter & Leave</title>
    <style>

        #dropdown{
            padding: 0.6em 1em;
            font-size: 2em;
            font-weight: bold;
            background-color: #333;
            display: none;
        }

    </style>
    <script>

        window.addEventListener('load', function () {
            // 이벤트 핸들러: window 객체에 load 이벤트가 발생하면 실행할 시능
            // → 브라우저(window 객체)가 DOM 트리를 완성하고, HTML 문서에 연결된
            //   외부 자원(스타일 시트, JavaScript 파일, 이미지 파일 등)을
            //   모두 읽어오면, window 객체에서 load 이벤트가 발생한다. 따라서
            //   window 객체의 load 이벤트 핸들러에서는 DOM에 문제 없이 접근할 수 있다

            //---------------------------------------------------------------------

            // 프로그램에서 참조하는 요소를 미리 탐색
            const show = document.getElementById('show');
            const dropdown = document.getElementById('dropdown');

            // 1. #show 요소의 영역에 마우스 포인터가 들어가면
            show.addEventListener('mouseenter', function () {
                // 1.1. #dropdown 요소가 화면에 나타나게 된다
                dropdown.style.display = 'block';
            });

            // 2. #show 요소의 영역에서 마우스 포인터가 빠져나가면
            show.addEventListener('mouseleave', function () {
                // 2.1. #dropdown 요소가 화면에서 사라지게 한다.
                // dropdown.style.display = 'none';
                // dropdown.style.display = '';
                // dropdown.style.display = 'null';
                dropdown.removeAttribute('style');
            });
        }); // window.onload

    </script>
</head>
<body>

    <h1 id="show">Show dropdown!</h1>
    <div id="dropdown">DROPDOWN</div>

</body>
</html>
Namiya
이전 포스트
Mouse enter/leave

JavaScript 연습

Image gallery overlay

0개의 댓글
