我正在尝试仅使用 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/