Как сделать мою CSS анимацию более чувствительной к наведению мыши

Question

Итак, у меня есть своеобразное меню, над которым я работаю, и которое я хочу приостановить, когда наведу на него курсор. И по большей части это работает. Однако, когда я наводю курсор мыши на весь контейнерный блок, он останавливается, что выглядит довольно неловко для некоторого более короткого текста.

Я хочу, чтобы конкретный c текст был наведен поверх анимации, чтобы она сама приостановилась. Я пытался использовать :hover на пролетах напрямую, но по какой-то причине это не сработало. Любые советы о том, как это сделать? Код ниже.

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

Добавить указатель-события none в контейнер.

И сбросить его на auto для дочерних элементов.

Наведение все еще срабатывает на контейнере, но только при наведении на дочерние элементы

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>