1. Home
  2. Docs
  3. Script Snippet
  4. 마우스 호버 시 다른 요소 백그라운드 변경

마우스 호버 시 다른 요소 백그라운드 변경

왼쪽 컬럼의 요소에 마우스를 호버 시 오른쪽 컬럼의 백그라운드 이미지를 변경하는 방법

jQuery hover 이벤트 체커로 왼쪽 컬럼 요소에 마우스 호버 시 ‘hovered’라는 클래스를 추가하고, 호버된 요소의 아이디를 얻어서 오른쪽 컬럼의 백그라운드 이미지 이름에 활용하기

ⓐ 먼저 화면에 표시될 구조를 html로 만들기

 

ⓑ ‘.process’ 클래스를 가진 요소에 마우스 호버 시 이벤트를 처리할 jQuery 코드 작성

 

ⓒ 나머지는 화면에 표시되는 구조의 css 스타일을 조정하기