자바스크립트 마우스오버 색상 변경

위와 같이 네비바 메뉴에 마우스 포인터를 올리면 색상이 변경되고,
포인터가 메뉴 영역을 벗어나면 다시 원래 색상으로 돌아오는 기능을 구현했다.

🐋 HTML

<div id="navBar">
      <ul id = "menuList">
        <li> <a href = "#home" > Home </a> </li>
        <li> <a href = "#about"> About </a> </li>
        <li> <a href = "#window1"> Like </a> </li>
        <li> <a href = "#window2"> Stack </a> </li>
        </ul>
    </div>

html에서 간단하게 ul과 li 속성을 이용해서 텍스트를 넣어주었다.
메뉴 클릭시 해당 페이지로 넘어갈 수 있도록 문서 내 링크를 걸어주었다.
ul에는 id명을 menuList로 설정해주었다.

🐠 CSS

#navBar ul{
  display: flex;
  overflow-x: hidden;
  justify-content: center;
  width: 100vw;  height: 40px;
  position: fixed;
  }

#navBar li{
  display: inline-block;
  padding: 10px 40px 10px 40px; 
  font-size: 20px; font-weight: bold;
  color:white;
}

li 텍스트의 기본 컬러 설정은 white이다.

🐳 JavaScript

let menuEvent = document.getElementById("menuList"); 

menuEvent.addEventListener("mouseover", function (event) {
  event.target.style.color = "#fbdd97";
}, false);


menuEvent.addEventListener("mouseout", function(event){
  event.target.style.color = "white";
}, false)

getElementById() 메서드를 이용하여 해당 기능을 적용할 id를 불러온 후, 이벤트를 연결시키기 위해 addEventListener() 를 사용한다.
위 코드에서는 html 문서 내 menuList 를 불러왔다.

✨ document.getElementById(id);

Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다.

✨ addEventListener(type, listener(, options / useCapture));

EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.

위 코드 내 false의 의미는 다음과 같다.
(이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값이다.)

첫번째 인자로 받은 이벤트("mouseover")가 발생하면 함수를 실행한다.
해당 함수 function(event){...} 에서
내부에 event.target 메서드를 이용하여 event 발생시 기능을 수행할 수 있도록 한다.
해당 페이지에서는 기본 white색상에서 #fbdd97 색상으로 변경된다.


이벤트 "mouseout" 도 위와 동일하게 적용 가능하다.