html - 为什么选取框在悬停时不停止？

Question

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

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>

但是当我将鼠标指向移动段落时没有任何反应。这是为什么？

Answer 1

那是因为跑马灯不是 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 可能需要供应商前缀，具体取决于您想支持多远的浏览器。