CSS:当一个元素从 Chrome 中的光标移动时，悬停仍然存在 - 有解决方法吗？

Question

我正在使用目前在 Chrome 中开发的应用程序界面，今天我没有时间在此处的示例中明确隔离此问题(我将尝试将其添加为编辑)，但似乎(至少在某些条件下，也许总是)当一个元素被赋予 :hover CSS 样式，然后该元素从光标移开时，:hover CSS 样式保持直到我移动鼠标。

在这种情况下，我有一个元素列表 (divs) 并且我正在收缩(将高度设置为 0，将 0.3 秒的过渡应用于高度变化)除了一个元素之外的所有元素，以便一个上升到顶部成为新菜单的标题。即使它上升到列表的顶部，它仍保留其 :hover CSS 样式。

我想知道这是否是一个已知的 Chrome 错误，如果是，如果有解决方法我可以应用来修补此行为。 如果这不是已知问题，我将尝试使用该问题的孤立示例对其进行编辑。

Answer 1

.btn {background:tomato;border:0;padding:8px 26px;color:#fff;}

.btn:hover {background:blue;}
.btn:focus {background:green;} /* when pressed mouse key is removed */
.btn:active {background:#303030;} /* when mouse key is in pressed state */

Example

<button type="button" class="btn">Button</button>