Почему courses__inner не сбрасывает стили, когда убираешь мышку с элемента?

Question

[Alex Clean]

Суть кода максимально простая: когда вводишь по элементу мышкой, он меняет трансформ rotate в зависимости от положения мышки. Проблем в сбросе стилей. Когда с элемента уводишь мышку на другой эоемент, то стили сбрасываются у последнего элемента. Но когда уводишь мышку за пределы элемента, то ничего не происходит. Нужна помощь поправить следующий код, он небольшой: Мне нужно, чтобы стили на элементе сбрасывались всякий раз, когда уводишь мышку с элемента, неважно куда, на другой элемент или еще куда.

CodePen

Comments

[szQocks]

const onMouseRotate = (wrap, elem) => {
    const wrapper = document.querySelector(wrap);

    let currentX;
    let currentY;
    let currentTarget = null

    if (!wrapper) return;

    const changeRotateSlider = (evt) => {
        const target = evt.target.closest(elem);
        
        if (currentTarget) {
            currentTarget.style.cssText = `transform: perspective(700px) rotateX(${currentY / 60}deg) rotateY(${-currentX / 60}deg) scale3d(1.02, 1.02, 1.02)!important; box-shadow: 0 0 20px 3px rgba(0,0,0,0.2);`
        }   
      
        if (target !== currentTarget && currentTarget || currentTarget && !target) {
            currentTarget.style.cssText = `transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)!important; box-shadow: 0 0 10px 5px rgba(0,0,0,0);`;
        }

        if (!target) return;

        currentTarget = target;
        currentX = evt.clientX - target.getBoundingClientRect().left - target.getBoundingClientRect().width / 2;
        currentY = evt.clientY - target.getBoundingClientRect().top - target.getBoundingClientRect().height / 2;   
    }

    wrapper.addEventListener('mousemove', changeRotateSlider);
}

 onMouseRotate('.courses', '.course__inner');

[Alex Clean]

szQocks, по моему это в точности мой код, нет?

[szQocks]

Alex Clean, да я немного изменил его, теперь он работает так как ты и хотел