css - 使用 CSS 悬停时动画触发的动画

Question

我试图触发一些其他按钮(元素)从“添加”按钮(object7)在 object7:hover 上滚动，但它不会似乎无论如何都会触发它。我试图避免使用 JavaScript，只使用 HTML 和 CSS。可以找到我得到的代码 here

有什么建议吗？

编辑:也许我不够清楚，应该是这样的:

用户悬停“设置”=> 所有元素从“设置”后面滑动 => 用户悬停“添加”=>

=> 元素从“添加”按钮后面滑落

Answer 1

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

如果您改为使用 span，它似乎可以工作。这是一个fiddle这表明。我没有费心去正确排列所有元素，但是当您将鼠标悬停在“添加”跨度上时，您可以看到“新建”跨度移动，我相信您正在努力实现这一目标。

<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 元素也可以，其他元素也可以。似乎按钮元素可能是问题所在？不确定，因为谷歌搜索暗示任何元素都适用于悬停伪选择器，但该按钮在我的 Chrome 版本中肯定不起作用。