How do I make my CSS animation more responsive to mouse hover

Question

So I've got a sort of marquee menu that I'm working on, which I want to pause when I hover over it. And for the most part it works. However, when I mouse over the entire container div, it stops, which looks really awkward for some of the shorter text.

I want for the specific text to be moused over, for the animation to pause itself. I've tried using :hover on the spans directly, but that doesn't seem to work for some reason. Any tips on how to do this? Code is below.

 body { overflow: hidden; font-size: 100%; }.outer { transform: rotate(10deg); margin-left: -6vw; }.inner { font-family: 'Catamaran'; font-size: calc(2em + 7vw); font-weight: 900; -webkit-text-fill-color: white; -webkit-text-stroke: 2px; letter-spacing: -.9vw; line-height: calc(.7em + 1vw); animation: marquee 30s linear infinite; display: inline-block; }.inner span:nth-of-type(2n) { font-size: calc(1em + 5vw); }.inner span:nth-of-type(2n-1) { -webkit-text-stroke-color: rgba(80, 80, 80, 0.753); }.switcher { position: relative; top: 0%; animation: switch 30s linear infinite; } @keyframes marquee { 100% { transform: translateY(-100%); } } @keyframes switch { 0%, 50% { top: 0%; } 50.01%, 100% { top: 100%; } }.inner:hover.switcher { animation-play-state: paused; }.inner:hover { animation-play-state: paused; }

 <div class="outer"> <div class="inner"> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>ABOUT</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>DESIGN</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>CODE</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>SOCIAL</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>BOOK</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>BLOG</a></span><br> <span>PRANAV NAIR</span><br> <span><a>ABOUT</a></span><br> <span>PRANAV NAIR</span><br> <span><a>DESIGN</a></span><br> <span>PRANAV NAIR</span><br> <span><a>CODE</a></span><br> <span>PRANAV NAIR</span><br> <span><a>SOCIAL</a></span><br> <span>PRANAV NAIR</span><br> <span><a>BOOK</a></span><br> <span>PRANAV NAIR</span><br> <span><a>BLOG</a></span><br> </div> </div>

Answer 1

Add pointer-events none on the container.

And reset it to auto on the children.

The hover is still triggered on the container, but only when hovering the children

 body { overflow: hidden; font-size: 100%; }.outer { transform: rotate(10deg); margin-left: -6vw; }.inner { font-family: 'Catamaran'; font-size: calc(2em + 7vw); font-weight: 900; -webkit-text-fill-color: white; -webkit-text-stroke: 2px; letter-spacing: -.9vw; line-height: calc(.7em + 1vw); animation: marquee 30s linear infinite; display: inline-block; }.inner span:nth-of-type(2n) { font-size: calc(1em + 5vw); }.inner span:nth-of-type(2n-1) { -webkit-text-stroke-color: rgba(80, 80, 80, 0.753); }.switcher { position: relative; top: 0%; animation: switch 30s linear infinite; } @keyframes marquee { 100% { transform: translateY(-100%); } } @keyframes switch { 0%, 50% { top: 0%; } 50.01%, 100% { top: 100%; } }.inner:hover { animation-play-state: paused; }.inner { pointer-events: none; }.switcher { pointer-events: auto; }

 <div class="outer"> <div class="inner"> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>ABOUT</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>DESIGN</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>CODE</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>SOCIAL</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>BOOK</a></span><br> <span class="switcher">PRANAV NAIR</span><br> <span class="switcher"><a>BLOG</a></span><br> <span>PRANAV NAIR</span><br> <span><a>ABOUT</a></span><br> <span>PRANAV NAIR</span><br> <span><a>DESIGN</a></span><br> <span>PRANAV NAIR</span><br> <span><a>CODE</a></span><br> <span>PRANAV NAIR</span><br> <span><a>SOCIAL</a></span><br> <span>PRANAV NAIR</span><br> <span><a>BOOK</a></span><br> <span>PRANAV NAIR</span><br> <span><a>BLOG</a></span><br> </div> </div>