如何让我的 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