document.addEventListener('DOMContentLoaded', () => { const leftColumn = document.querySelector('.left-column'); const rightColumn = document.querySelector('.right-column'); const petanqueBall = document.querySelector('.petanque-ball'); const upArrow = document.querySelector('.up-arrow'); const leftArrow = document.querySelector('.left-arrow'); const rightArrow = document.querySelector('.right-arrow'); leftColumn.addEventListener('mouseenter', () => { petanqueBall.style.transform = 'rotate(-45deg)'; upArrow.style.opacity = '0'; leftArrow.style.opacity = '1'; }); leftColumn.addEventListener('mouseleave', () => { petanqueBall.style.transform = 'rotate(0deg)'; upArrow.style.opacity = '1'; leftArrow.style.opacity = '0'; }); rightColumn.addEventListener('mouseenter', () => { petanqueBall.style.transform = 'rotate(45deg)'; upArrow.style.opacity = '0'; rightArrow.style.opacity = '1'; }); rightColumn.addEventListener('mouseleave', () => { petanqueBall.style.transform = 'rotate(0deg)'; upArrow.style.opacity = '1'; rightArrow.style.opacity = '0'; }); });