Question

我正在尝试触发其他按钮（项目）以从“添加”按钮（object7:hover）滚动object7，但它似乎无法触发它。我试图避免使用JavaScript，只使用HTML和CSS。我找到的代码可以找到here

有什么建议吗？

编辑：也许我不够清楚，这应该是怎么回事：

用户悬停'设置'=＆gt;所有项目都从'设置'=＆gt;后面滑动用户悬停'添加'=＆gt;

=＆GT;项目从“添加”按钮后面向下滑动

Answer 1

我相信您的问题是该按钮不会响应悬停事件。

如果你使用跨度，它似乎工作。这是展示的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版本。

动画在悬停时使用CSS触发动画

1 个答案: