Question

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

绕轴旋转（有效）
饱和行星纹理（有效）
淡出最上面的数字图像并以与行星相反的方向旋转（起作用）
淡入底部数字图像，并以与行星相反的方式旋转（完全无效）

以下是网站的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);
    }

过渡与悬停相互重叠/覆盖，如何解决？

1 个答案: