移动元素转换后，悬停状态仍然存在

Question

我有两个按钮可以在页面元素周围移动，包括按钮本身。这意味着单击时按钮将远离光标移动。 现在，当单击其中一个按钮时，将保留其：悬停状态，这意味着光标仍然是指针，按钮正在显示其鼠标悬停背景。 奇怪的是，这只发生在其中一个而不是另一个。

我遇到了很多基本相同问题的问题，但没有找到合适的解决方案。

仅在FF 49.0.2上测试。

np.newaxis/None

这里是CSS（我使用JQuery来切换vertical和leftHand类）：

compile ‘com.android.support:design:25.0.0’

感谢您的帮助！

Answer 1

抱歉，看起来我实际上已经找到了自己问题的答案。 垂直过渡不保持悬停状态的原因是因为它也改变了移动元素的大小，而水平过渡则没有。 如果要“更新”悬停状态，则必须强制重绘元素，这可以通过更改高度或宽度来完成。

Updated Fiddle

#content.leftHand .interface {
        right: 68.8vw;
/* FIXED: changing the size forces a redraw of the element, causing the hover state to update */
    width: 29.05vw !important;
    }