使用CSS触发悬停动画的动画

Question

使用CSS触发悬停动画的动画

cssanimationbutton

3

我正在尝试在“Add”按钮（object7）的object7:hover上触发其他按钮（项目）的滚动，但无论如何似乎都无法触发它。我试图避免使用JavaScript，仅使用HTML和CSS。可以在此处找到我的代码。

有什么建议吗？编辑：也许我没有表达清楚，这是应该如何进行：

用户悬停在“设置”上 => 所有项目从“设置”后面滑出 => 用户悬停在“添加”上 =>

=> 项目从“添加”按钮后面滑下

- Dann

你的示例在Chrome中运行得很好，在IE中则糟糕透了。由于不同的浏览器，纯CSS在这里将非常困难。哪些浏览器是您必须支持的？ - Andrew Grothe

@amn 当你将鼠标悬停在上面时，它应该滚动。（不确定你的意思是什么） - Dann

@agrothe 至少支持 Safari、Maxthon（我使用的浏览器）、Chrome 和 Firefox。但是我可以添加“-ms-transition”，以防IE与“transition”兼容。如果用户在IE中查看，我可以编写JS版本。 - Dann

1

如果你愿意为 IE 添加一个 JS 版本，那么在任何浏览器上都使用 JS 显示似乎是最明智的选择？ - JamieM23

@JamieM23 是的，但正如我所说，我正在尝试仅使用HTML和CSS。最好是这样。 - Dann

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Grothe · Accepted Answer

我认为你的问题是按钮不响应悬停事件。

如果你使用span标签，它似乎可以工作。这里有一个fiddle演示。我没有费心把所有元素排列好，但你可以看到"New" span随着你悬停在"Add" span上而移动，这就是我认为你想要实现的效果。

<div class="container">
<span class="set">
    <span class="object1">Start</span >
    <span class="object2">Stop</span >
    <span class="object3">Play</span >
    <span class="object4">Pause</span >
    <span class="object5">More</span >
    <span class="object6">Info</span >
    <span class="object7">Add
         <span class="object8">New</span >       
    </span >
    <span class="default">Settings</span >
    </span>
</div>

编辑：div元素也可以使用，其他元素可能也可以。似乎按钮元素可能是问题所在？不确定，因为谷歌搜索暗示任何元素都可以与hover伪选择器一起使用，但是在我的Chrome版本中按钮肯定无法工作。