CSS3：是否可以在元素悬停时暂停其他元素的动画？

【问题标题】：CSS3: Is it possible to pause OTHER elements' animations on hover of an element?CSS3：是否可以在元素悬停时暂停其他元素的动画？
【发布时间】：2014-09-25 17:48:53
【问题描述】：

我正在尝试仅使用 CSS 制作轮播。我已经到了一个图像滑块的地步，每个图像都链接到另一个页面。它看起来很棒，但我想添加控件。我在图像滑块下制作了“按钮”，并让它们与滑块同步亮起（当第一张图像滑入时，第一个按钮亮起，等等）。有什么方法可以通过创建一个悬停语句来使每个按钮都起作用，该语句将暂停其他按钮和滑块的动画？而且我想更重要的是，我可以做一个点击语句，让图像滑块跳到动画中的适当位置吗？

【问题讨论】：

标签： css animation

【解决方案1】：

简短的回答是：不。这是不可能的。

您要查找的内容不存在：您需要一个 :has - 选择器。

<div id="container">
  <span id="content">content</span>
  <span>id="button">button</span>
</div>

<!-- non-functional css -->
#container:has(#button:hover) > #content
{
    background-color:red; <!-- or: stop animation -->
}

确实存在的 has-selector 是 JQuery (http://api.jquery.com/has-selector/)，并且可能在未来的 css 版本中实现。它是未包含在 css3 中的悬停。它似乎包含在 css4 中： http://dev.w3.org/csswg/selectors/#has-pseudo

【讨论】：

@Roko C Buljan：感谢您的建议。我更改了链接并从简短的回答开始：不。即使使用非选择器。