问题描述
我正在尝试仅使用CSS制作轮播。我要准备一个图像滑块，每个图像都链接到另一个页面。看起来不错，但我想添加控件。我在图像滑块下创建了按钮，并设置了动画使其与滑块同步点亮（当第一个图像滑入时，第一个按钮点亮，依此类推）。我有什么办法可以通过创建一个悬停语句来使每个按钮正常工作，该语句将暂停其他按钮以及滑块的动画？而且我想更重要的是，我能否做出点击声明，以使图像滑块跳到其动画中的适当位置？
I'm trying to make a carousel with CSS only. I'm to the point where I have an image slider with each image linking to another page. It looks great but I want to add controls. I've made "buttons" under the image slider and I have them animated to light up in sync with the slider (1st button lights up when 1st image slides in, etc.). Is there any way I can make each of the buttons functional by creating a hover statement that will pause the animations of the other buttons as well as the slider? And I guess more importantly, can I make a click statement that will cause the image slider to skip to the appropriate place in its animation?
推荐答案
简短的答案是：不。
您要查找的内容不存在：您需要一个：has-选择器。
What you're looking does not exist: you need a :has - selector.
<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 -->
}
具有选择器的对象是JQuery（），并且可能会在将来的CSS版本中实现。它没有悬停在css3中。它似乎包含在css4中：
The has-selector DOES exist is JQuery (http://api.jquery.com/has-selector/) and might be implemented in future css-versions. It is hover not included in css3. It appears to be included in css4:http://dev.w3.org/csswg/selectors/#has-pseudo
这篇关于CSS3：是否可以在元素悬停时暂停其他元素的动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！