Почему бегущая строка не останавливается при наведении?

Это потому, что выделение не является анимацией CSS3, и это все, что вы можете приостановить с помощью animation-play-state:paused;.

Но что еще более важно: вы больше не должны использовать бегущую строку.

Если вам нужно что-то подобное, например список движущихся ссылок, по которому можно щелкнуть и который останавливается при наведении курсора, вам следует искать альтернативы, я могу поспорить, что есть некоторые плагины бегущих строк jQuery.

Изменить. Поскольку вы ищете анимацию CSS3 с возможностью паузы в соответствии с вашими комментариями, вам потребуется следующая разметка:

<p class="marquee"> <!-- the wrapping container -->
  <span> ... </span> <!-- the tray moving around -->
</p>

Содержимое в вашем диапазоне будет перемещаться по контейнеру-обертке с классом marquee.

/* define the animation */
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* define your limiting container */
.marquee {
  width: 450px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee 15s linear infinite; /* here you select the animation */
}

/* pause the animation on mouse over */
.marquee span:hover {
  animation-play-state: paused
}

Также как jsfiddle: http://jsfiddle.net/MaY5A/209/

Дополнительное примечание:

Поскольку анимация CSS3 все еще находится в экспериментальном состоянии в некоторых браузерах, возможно, вам придется добавить префиксы поставщиков. Что может быть странно, особенно для самого определения анимации:

@-webkit-keyframes marquee {
  ...
}

@-moz-keyframes marquee {
  ...
}

Но для transform, translate, animation и animation-play-state могут потребоваться префиксы поставщиков, в зависимости от того, насколько давно вы хотите поддерживать браузеры.