我真的真的以为我很聪明......
我想要一种优雅的方式来让按钮具有背景的悬停效果，使用柔和的颜色过渡进行某种删除(从上到下，从左到右)。我认为最好的方法是使用 :after 创建一个框伪类，并在悬停时弄乱它的高度或位置，用 z-index 将它保持在实际元素后面，并使用 rgba() <a> 的概念标签的透明背景。
我成功做到了:http://jsfiddle.net/MrPickle/ysdhexbq/3/
问题是，当鼠标通过该菜单时，有时会在按钮底部留下一条细线。我可以想象这个问题完全出在我自己的浏览器的渲染引擎上，但我想知道你们是否也看到了它，或者是否有人可以解释导致该行为的原因。
那个 fiddle 中的例子使用了transition: top作为隐藏由 :after 创建的框的方法, 但我在使用 transition: height 时得到了相同的结果和 transition: transform .
实际上，从头开始，我的结果更糟。如果你想看到这个错误发生很多，检查这个 http://jsfiddle.net/MrPickle/ysdhexbq/5/如果您在元素有机会完成第一个过渡之前一直通过光标，效果会更好(阅读:更糟)。
最佳答案
嗯.. The Iron Developer 建议的硬件加速肯定会阻止错误在我的机器上发生，但前几次转换触发看起来有点紧张。考虑到我要进行的过渡并不是真的那么费力，我不认为调用更多硬核系统功能会浪费绘画时间。
不过，我稍微摆弄了一下，我注意到当父级 div 周围有边框时，行 出现的区域是说...我猜。
这是我更新的 fiddle :http://jsfiddle.net/MrPickle/ysdhexbq/8/
似乎运行得非常快，我没有注意到我之前遇到的问题。
关于css - 对高度、位置和转换使用 css 转换时出现奇怪的背景/边框行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27739010/