마우스가 올라오면 바뀌는 화면! + 카테고리 등장

main 부분

<main id="main">
        <div class="image__wrap">
            <img src="img1.jpg" alt="바닷속" class="A">
            <div class="btn">
                <button class="bttn">&#9776;</button>
                <nav class="nav">
                    <ul class="ul">
                    <li><a href="#">안녕하세요</a></li>
                    <li><a href="#">자바스크립트 어려워요</a></li>
                    <li><a href="#">살려주세요</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </main>

메인 박스 안에 이미지가 들어갈 박스를 만들어 주고 이미지를 삽입한 뒤 선택자 선택을 위해 클래스 속성을 부여했습니다.

마찬가지로 버튼에도 해주었습니다.

---

Script 부분

<script>
    const imageAll = document.querySelector(".image__wrap .A");
    const btn1 = document.querySelector(".bttn");
    const nav1 = document.querySelector(".nav");

    document.querySelector(".image__wrap .A").addEventListener('mouseenter', () => {
        imageAll.src = "img1.jpg";
    });

    document.querySelector(".image__wrap .A").addEventListener('mouseleave', () => {
        imageAll.src = "img2.png";
    });

    btn1.addEventListener("click", () => {
        btn1.classList.toggle("active");
        nav1.classList.toggle("active");
    });
</script>

이 예제의 주요 목적은 선택자 사용인 것 같아 선택자를 총 3가지 만들어 주었습니다.

imageAll은 이미지를, btn1은 버튼을 nav는 카테고리 입니다. 

 

document.qrerySelector(".image__wrap .A").addEventListener('mouseenter', () => {

    imageAll.src = "img2.png";

});

 

선택자를 이용해 이미지 변수를 묶어 준 뒤 마우스 관련 이벤트를 발생시키기 위해 addEventListener을 넣었습니다. 그리고 함수 안에 변수를 넣어주었습니다.

 

addEventListener

지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.

 

버튼의 경우 토글이라는 속성을 사용했습니다.

토글이란?

toggle() 토글이란, on/off switch의 개념으로 스위치를 켰다, 껐다 하는 기능을 가지고 있습니다. add()와 remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념입니다.