移动元素后保持悬停状态答案

【问题标题】：Hover state remains after moving element with transition移动元素后保持悬停状态
【发布时间】：2017-03-15 11:03:21
【问题描述】：

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

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

仅在 FF 49.0.2 上测试。

Fiddle

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

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

感谢您的帮助！

【问题讨论】：

我在相关问题中看到了this。看起来很有希望，很快就会尝试。但是，向上/向下按钮没有相同问题的事实让我怀疑存在非 JS 解决方案。

标签： jquery css hover css-transitions transition

【解决方案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;
    }

【讨论】：