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

那是因为marquee不是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可能需要供应商前缀，具体取决于您希望支持浏览器的距离。

为什么没有悬停的大帐篷停止？

1 个答案: