.marquee-container { width: 100%; overflow: hidden; white-space: nowrap; border: 1px solid #ccc; background: #f9f9f9; height: 40px; display: flex; align-items: center; position: relative; cursor: pointer; } .marquee-content { display: inline-block; padding-left: 100%; animation: marquee 35s linear infinite; animation-play-state: running; /* Default state is running */ } .marquee-container a { text-decoration: none; color: #374def; font-weight: bold; margin: 0 10px; } @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } const marquee = document.querySelector('.marquee-content'); const container = document.querySelector('.marquee-container'); // On hover -> pause container.addEventListener('mouseenter', () => { marquee.style.animationPlayState = 'paused'; }); // On mouse leave -> resume container.addEventListener('mouseleave', () => { marquee.style.animationPlayState = 'running'; });