如何讓我的 LinkedIn 徽章過渡平滑淡入淡出？

Question

如何讓我的 LinkedIn 徽章過渡平滑淡入淡出？

我知道 Web 開發的基礎知識，我一直在使用和學習 HTML 和 CSS 在視覺工作室代碼上 3 或 4 天，最近我遇到了一個個人網站，它仍然處於過渡階段CSS 的命令對我不起作用我不知道為什么我希望 LinkedIn 徽章在大約 2 或 3 秒內順利淡入和淡出，但它沒有讓我。

這是代碼： https://jsfiddle.net/JadeDoe/1jvs6rhy/9/

CSS：

    .badge-base {
        display: none;
        position: absolute;
        top: 24px;
        left: 16%;

        transition: 1s;
    }

    .Heading:hover+.badge-base {
        display: inline;
    }

    .Heading:hover .badge-base,
    .badge-base:hover {
        display: block;
    }

Answer 1

您不能將 display none 轉換為阻止。 但是，您可以使用不透明度來做到這一點（盡管這不是確切的事情，因為該元素仍會占用空間）

 .badge-base { position: absolute; top: 24px; left: 40%; transition: 1s; opacity: 0; pointer-events: none; }.Heading:hover+.badge-base { display: inline; opacity: 1; pointer-events: all; }.Heading:hover.badge-base, .badge-base:hover { display: inline; opacity: 1; pointer-events: all; }

 <body> <div> <h1 class="Heading">Jane D Walker</h1> <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="g-mail-assistance-704528251" data-version="v1"> <a class="badge-base__link LI-simple-link" href="https://pk.linkedin.com/in/g-mail-assistance-704528251?trk=profile-badge"></a> </div> </div> <script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script> </body>

如何讓我的 LinkedIn 徽章過渡平滑淡入淡出？

問題描述

1 個解決方案

解決方案1
0 已采納 2022-09-23 20:59:26

如何讓我的 LinkedIn 徽章過渡平滑淡入淡出？

問題描述

1 個解決方案

解決方案1 0 已采納 2022-09-23 20:59:26

解決方案1
0 已采納 2022-09-23 20:59:26