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

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

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

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

<div>
    <div class="process-info-left">
        <div id="process-1" class="process hovered">
            <h2>기획에 따른 기능 조합 및 세팅</h2>
            <p>사이트에 따라 기획이 다르며, 기획 내용을 구현할 기능들이 안정적으로 갖춰져야 합니다. 테마나 플러그인들의 각종 옵션 설정도 진행됩니다.</p>
        </div>
        <div class="tabcontent"><img
            src="/wp-content/uploads/2018/05/process-1.jpeg"
            alt=""/></div>
        <div id="process-2" class="process">
            <h2>페이지 제작 및 퍼블리싱</h2>
            <p>각 페이지들을 구성하고, 디자인에 맞게 화면을 구성하는 작업들입니다. 영문으로 표시되는 문구에 대한 번역 과정도 필요합니다.</p>
        </div>
        <div class="tabcontent"><img
            src="/wp-content/uploads/2018/05/process-2.jpeg"
            alt=""/></div>
        <div id="process-3" class="process">
            <h2>어드민 관련 설정 및 브랜딩 작업</h2>
            <p>CMS로서의 장점을 잘 이용하기 위해 어드민 화면의 정리 작업 및 이후 컨텐츠를 꾸준히 업데이트 하는 데 편리하도록 구성합니다.</p>
        </div>
        <div class="tabcontent"><img
            src="/wp-content/uploads/2018/05/process-3.jpeg"
            alt=""/></div>
        <div id="process-4" class="process">
            <h2>보안 및 업데이트 관련 설정</h2>
            <p>각종 테마나 플러그인의 업데이트 계획은 어떻게 진행이 될지, 그리고 보안 관련 이슈는 무엇이 있을지 확인 및 조치를 합니다.</p>
        </div>
        <div class="tabcontent"><img
            src="/wp-content/uploads/2018/05/process-4.jpeg"
            alt=""/>
        </div>
    </div>
    <div id="previewblock" class="process-info-right">
        <div class="tabcontent"></div>
    </div>
</div>

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

(function ($) {

    $('.process').hover(function () {

        $('.process').removeClass('hovered');   // 우선 모든 호버 클래스를 지우고 
        $(this).addClass('hovered');   // 호버된 요소에 클래스를 추가 

        var processID = this.id;    // 호버된 요소의 아이디를 확인 
        var backURL = 'https://oksambari.xyz/wp-content/uploads/2018/05/' +
                processID + '.jpeg';
        $('.process-info-right .tabcontent').css({
            'background-image': 'url(' + backURL + ')'    // 백그라운드 이미지를 변경 
        });

    });

})(jQuery);

.process-info-right .tabcontent {
    background-image: url("/wp-content/uploads/2018/05/process-1.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: background 0.2s linear;
}
.process { opacity: 0.3; }
.process.hovered { opacity: 1; }

Script Snippet