过渡和胡佛相互重叠/覆盖，如何解决？

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（它没有出现在我的演示文本中，所以我希望在我发布此内容时它会出现。我会添加一张图片来确定）：

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