css의 hover 를 JavaScript 로 구현해보자!

CSS 의 가상 선택자 :hover를 사용하면 쉽게 할 수 있는 부분이지만,

JavaScript 로도 구현할 수 있다.

연습을 위해서 마우스오버를 자바스크립트로 구현해 보자.

아래의 예시는 <img> 태그에 src 값을 바꾸면서 hover 를 처리해야 하는 경우이다.

상세 내용

먼저, <img> 태그의 src 에 접근하여 off_str 에 저장한다.
off_str 과 replace 를 이용하여 src 의 value를 일부 바꾸고 on_str 에 저장한다.
마우스 이벤트에 따라 <img> 태그의 src 를 off_str 또는 on_str 로 변경해 준다.

JS

const rollover = document.querySelectorAll('.rollover');

rollover.forEach((aTag, index) => {
    let off_str = aTag.querySelector('img').getAttribute('src');
    let on_str = off_str.replace('_off', '_on');
    // mouse on
    aTag.addEventListener('mouseover', function() {
        this.querySelector('img').setAttribute('src', on_str);
    });
    // mouse off
    aTag.addEventListener('mouseout', function() {
        this.querySelector('img').setAttribute('src', off_str);
    });
});

getAttribute('src') : 태그의 작성한 속성(scr)을 검색
setAttribute() : 태그의 속성을 변경
replace('검색값', '변경값') : 값에 검색값 이 있으면 변경값 으로 변경한다.
forEach((element, key)=>{}) : 각각의 element와 key(index)를 받을 수 있으며, 각각마다 동작을 수행할 수 있다.

HTML

<div id="wrap">
        <div class="header">
            <ul class="gnb">
                <li>
                    <a href="index.html" class="rollover">
                        <img src="images/menu01_off.png" alt="Home">
                    </a>
                </li>
                <li>
                    <a href="index.html">
                        <img src="images/menu02_off.png" alt="Products">
                    </a>
                </li>
                <li>
                    <a href="index.html" class="rollover">
                        <img src="images/menu03_off.png" alt="Company">
                    </a>
                </li>
            </ul>
        </div>
</div>

CSS


body {
    font-size: 12px;
}

#wrap {
    position: relative;
    width: 960px;
    margin: 0 auto;
}
.gnb {
    position: relative;
    display: inline-block;
}
.gnb > li {
    position: relative;
    float: left;
}