移动带有过渡的元素后悬停状态仍然存在

Question

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

我遇到过很多基本相同的问题，但没有找到可行的解决方案。

仅在 FF 49.0.2 上测试。

Fiddle

这是 CSS（我使用 JQuery 切换垂直和左手类）：

/* *** INTERFACE *** */
    .interface {
        position: absolute; right: 2.16vw;
        width: 29.04vw;
        transition: top 2s, right 2s, width 2s, height 2s;
    }

    #content.leftHand .interface {
        right: 68.8vw;
    }

    #content.vertical .interface {
        top: 68.8vh !important;
        height: 29.04vh !important;
    }

    .interface > div {
        position: absolute; top: 0; bottom: 0; left: 0; right: 0;
        width: 27.94vw;
        margin: auto;
        transition: height 2s, width 2s;
    }

    #content.vertical .interface > div {
        height: 27.94vh !important;
    }

    #settings {
            top: 2.09vh;
            height: 10.15vh;
        }

        #content.vertical #settings {
            right: 3.29vw;
            width: 10.15vw;
        }

        #content.vertical.leftHand #settings {
            right: 86.57vw;
        }

        #settingsContainer {
            height: 8.65vh;
        }

        #content.vertical #settingsContainer {
            width: 8.65vw;
        }

        #settingsContainer div {
            width: 100%; height: 100%;
            margin: 0; padding: 0;
        }

        #settings span {
            position: absolute; top: 0.52vh; display: block;
            width: 5.2vw; height: 7.61vh;
            transition: top 2s, left 2s, width 2s, height 2s;
        }

        #settings button {
            position: absolute;
            width: 100%; height: 100%;
            cursor: pointer;
            border: 0;
                background-color: rgba(230, 0, 225, 1);
            transition: opacity 1.5s;
        }

        #content.vertical #settings span {
            left: 0.52vw !important;
            width: 7.61vw; height: 5.2vh;
        }

        /* SwitchHand & Rotate */           
            #switchHandBtn {
                left: 0.32vw;
            }

            #content.leftHand #switchHandBtn {
                left: 22.4vw;
            }

            #content.vertical #switchHandBtn {
                top: 0.32vh;
            }

            #content.leftHand #switchHandBtn:not(:hover) #rightHandBtn, #content:not(.leftHand) #switchHandBtn:not(:hover) #leftHandBtn,
            #content.leftHand #switchHandBtn:hover #leftHandBtn, #content:not(.leftHand) #switchHandBtn:hover #rightHandBtn {
                opacity: 0;
            }

            #rotateBtn {
                left: 5.84vw;
            }

            #content.leftHand #rotateBtn {
                left: 16.88vw;
            }

            #content.vertical #rotateBtn {
                top: 5.84vh;
            }

            #content.vertical #rotateBtn:not(:hover) #rotateHorBtn, #content:not(.vertical) #rotateBtn:not(:hover) #rotateVertBtn,
            #content.vertical #rotateBtn:hover #rotateVertBtn, #content:not(.vertical) #rotateBtn:hover #rotateHorBtn {
                opacity: 0;
            }

感谢您的帮助！

Answer 1

抱歉，看来我实际上已经找到了我自己问题的答案。垂直过渡不保留悬停状态的原因是因为它也会改变移动元素的大小，而水平过渡则不会。如果你想"update"悬停状态，你将不得不强制重绘元素，这可以通过改变高度或宽度来完成。

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;
    }

移动带有过渡的元素后悬停状态仍然存在

Hover state remains after moving element with transition

css

jquery

transition

hover

css-transitions

Fiddle