👻 [WHYGRAM] | [JS] | mouseout , mouseover , mousout 안 먹힐 때

html

<span class="header__right">
            <div class="right__icon">
                <a th:href="@{/feed/home}">
                    <i class="header-icon bi bi-house-fill"></i>
                </a>
                <a th:href="@{/profile/mypage}">
                    <i class="header-icon bi bi-person-circle"></i>
                </a>
                <a th:href="@{/user/logout}" class="logout">
                    <i class="header-icon bi bi-door-closed-fill"></i>
                </a>
            </div>
 </span>

js

const logoutElem = document.querySelector('.header__right>.right__icon>.logout');
logoutElem.addEventListener('mouseout', () => {logoutElem.innerHTML = `<i class="header-icon bi bi-door-closed-fill"></i>`});
logoutElem.addEventListener('mouseover', () => {logoutElem.innerHTML = `<i class="header-icon bi bi-door-open-fill"></i>`});

✅ pointer-events: none;

✅ 자식요소에 꼭~ pointer-events: none;을 적용

시켜야지 mouseout이 실행된다

✅ 그런데 여기서는 <a class="logout"><a> 의 자식에만 pointer-events: none;을 적용시키면 안되고 다른 형제요소들에게도 적용시켜야지 해결됐다

✅ pointer-events: none; 을 자식요소와 형제요소까지 적용시켜야 한다.