포커스, 마우스 오버시 화면 전환 이벤트

포커스, 마우스 오버시 화면 전환 이벤트

카드를 포커스 인이나 오버시 다른 카드는 비활성화 시키는 이벤트 입니다.

<div class="section05__object">
        <ul class="section05__object-list">
          <li class="section05__object-item item01" data-index="1">
            <button class="section05__object-tit ">1
              <span class="section05__object-01 section05__hover-object">
                <img src="/images/section05img1.png"
                  alt="" />
              </span>
            </button>
          </li>
          <li class="section05__object-item item02" data-index="2">
            <button class="section05__object-tit ">2
              <div class="section05__object-02 section05__hover-object">
                <img src="/images/section05img2.png" alt="" />
              </div>
            </button>
          </li>
          <li class="section05__object-item item03" data-index="3">
            <button class="section05__object-tit ">3
              <div class="section05__object-03 section05__hover-object">
                <img src="/images/section05img3.png"
                  alt="" />
              </div>
            </button>
          </li>
        </ul>
      </div>

const hoverBtn = document.querySelectorAll('.section05__object-tit')
    hoverBtn.forEach((e, idx) => {
      e.addEventListener('focusin', ele => {
        offFunction(hoverBtn);
        ele.currentTarget.classList.add('-on')
      })
      e.addEventListener('focusout', ele => {
        offdelFunction(hoverBtn);
      })

      e.addEventListener('mouseover', ele => {
        offFunction(hoverBtn);
        ele.currentTarget.classList.add('-on')
      })
      e.addEventListener('mouseout', ele => {
        offdelFunction(hoverBtn);
      })
    })
    function offdelFunction(target) {
      target.forEach((e, idx) => {
        e.classList.remove('-on')
        e.classList.remove('-off')
      })
    }
    function offFunction(target) {
      target.forEach((e, idx) => {
        if (e.classList.contains('-on')) {
          e.classList.remove('-on')
        } else {
          e.classList.add('-off')
        }
      })
    }