CSS3 : Is it possible to pause OTHER elements' animations on hover of an element?

标签 css animation

我正在尝试仅使用 CSS 制作轮播。我到了我有一个图像 slider 的地步,每个图像都链接到另一个页面。它看起来不错,但我想添加控件。我在图像 slider 下制作了“按钮”,并让它们动画化以与 slider 同步点亮(当第一个图像滑入时第一个按钮点亮,等等)。有什么方法可以通过创建悬停语句来暂停其他按钮和 slider 的动画来使每个按钮都起作用?而且我想更重要的是,我能否制作一个点击语句,使图像 slider 跳到其动画中的适当位置?

最佳答案

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

您正在查找的内容不存在:您需要一个 :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 DOES 存在于 JQuery ( http://api.jquery.com/has-selector/ ) 中并且可能在未来的 css 版本中实现。它是 css3 中不包含的悬停。它似乎包含在 css4 中: http://dev.w3.org/csswg/selectors/#has-pseudo

关于CSS3 : Is it possible to pause OTHER elements' animations on hover of an element?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25988971/

相关文章:

css - 继承多个nth-child时重置nth-child "clear: both"

css 使用 body 标签帮助背景

javascript - Jquery - 如何延迟后续动画?

wpf - WPF中的滚动学分屏幕...想法?

jquery - 整个页面加载后播放CSS3动画

animation - 如何在Flutter应用中使Lottie动画变得 flutter 朔迷离?

css - 在较小的 div 中垂直居中图像(多个缩放图像,多个 div)

html - 基于百分比具有相同高度的三个水平对齐的 div

css - 动画文本持续时间

jquery - 使用 HTML5 canvas 制作一个简单的汽车游戏