为什么选框不会在悬停时停止？答案

【问题标题】：Why doesn't the marquee stop on hover?为什么选框不会在悬停时停止？
【发布时间】：2014-07-30 07:43:41
【问题描述】：

为了停止鼠标悬停的选取框，我这样做了：

CSS:

<style type="text/css">

.wm {
    border: solid 2px;
    border-color:#0aa2e3;
    border-radius: 10px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:13px;
}

marquee:hover {
    animation-play-state:paused;
}

</style>

HTML :

<p class="wm"> <marquee> ... </marquee> </p>

但是当我将鼠标指向移动的段落时，什么也没有发生。这是为什么呢？

【问题讨论】：

你用的是什么浏览器？
我认为这与 chrome 作为 webkit 浏览器有关，但 Kevin 似乎在下面指出了真正的问题。
只是出于好奇，你为什么要使用字幕？

标签： html css hover marquee

【解决方案1】：

这是因为选取框不是 CSS3 动画，而这就是您可以通过 animation-play-state:paused; 暂停的所有内容

但更重要的是：您根本不应该再使用 marquee

如果您需要类似的东西，例如可以单击并在悬停时停止的移动链接列表，您应该寻找替代方案，我敢打赌那里有一些 jQuery 新闻自动收录器插件。

编辑：由于您正在根据您的 cmets 寻找可暂停的 CSS3 动画，因此您需要以下标记：

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

span 中的内容将是使用 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 可能需要供应商前缀，具体取决于您希望支持浏览器的时间。

【讨论】：

而且我不允许使用js
在您的小提琴中，他们为选框段落内的span 添加了动画。
我怎样才能像小提琴一样实现？
你添加的 jsfiddle 没有使用 marquee，而是 CSS3 动画替代品，但我得看看这里有什么可能。
这很奇怪，它使用的代码与您链接的代码几乎完全相同。（它也为我感动）