Transitions & Hovers 是 overlapping/overriding 彼此，如何解决？

Question

我正在制作一个音板，我偶然发现了一个问题。我正在设计按钮的样式，这就是它的外观...... 当您将鼠标悬停在按钮上时，星球应该：

绕轴旋转（有效）
饱和行星纹理（有效）
淡出最上面的数字图像并旋转行星的相反方向（可行）
淡化底部数字图像并旋转行星的相反方向（根本不起作用）

网站图片3张：

1

2

3

这是CSS（按钮=行星，数字=顶部数字图像，数字下方=底部数字图像）：

    .button {
        position: absolute;
        width: calc(80% - 8px);
        height: calc(80% - 8px);
        background: white;
        border-radius: 200px;
        top: 10%;
        left: 10%;
        text-align: center;
        border: 4px solid white;
        box-shadow:0px 0px 15px 8px black;
        transition: transform 300s, filter 2s;
        transform: rotate(0deg);
    }

    .button:hover {
        transform: rotate(6200deg); 
        filter: saturate(600%);
    }

    .number {
        transition: transform 300s, opacity 2s;
        transform: rotate(0deg);
        opacity: 1;
        position: absolute;
        z-index: 2;
        left: 0;
    }

    .number:hover {
        transform: rotate(-6200deg);
        opacity: 0;
    }

    .number-under {
        position: relative; 
        left: 0; 
        z-index:1;
        opacity: 0;
        transform: rotate(0deg);
        transition: transform 300s;
    }

    .number-under:hover {
        opacity: 1;
        transform: rotate(-6200deg);
    }

这是 HTML（它没有出现在我的演示文本中，所以我希望当我 post 时它会出现。我会添加图片只是为了确定）：

HTML Code Image

Answer 1

我找到了解决方案，我改变了一些 CSS:

    .number-under {
        position: absolute; 
        left: 0; 
        z-index: 1;
        opacity: 0;
        transform: rotate(0deg);
        transition: transform 300s, opacity 2s;
    }

    .number:hover ~ .number-under {
        opacity: 1;
        transform: rotate(-6200deg);
    }

Transitions & Hovers 是 overlapping/overriding 彼此，如何解决？

Transitions & Hovers are overlapping/overriding eachother, how to fix?

hover

overriding

transition

overlap