将背景平滑移动到导航栏中的悬停元素

Question

我正在为我的网站制作一个导航栏，并且我试图在后台出现“斑点”的情况下转移到任何悬停的链接上。

目前，我正在使用第二个导航栏和剪切路径进行操作：

nav {
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 65px;
  display: flex;
  flex-wrap: wrap;
}

.nav-menu,
.nav-bg {
  display: flex;
  justify-content: flex-end;
  ul {
    margin: 0;
    list-style-type: none;
    height: 100%;
    display: flex;
    position: relative;
  }
}

.nav-item {
  height: 100%;
  a {
    display: inline-block;
    text-align: center;
    color: #7000ab;
    padding: 0 .8rem;
    height: 100%;
    display: flex;
    align-items: center;
  }
}

.nav-bg-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(5px 5px 10px rgba(#7000ab, .4));
  .nav-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #7000ab, #be00ab);
    background-size: 100% 100%;
    background-position: 0 0;
    transition: .5s;
    .nav-item a {
      color: #f0f5f6;
    }
  }
}

.nav-item:nth-of-type(1).current~.nav-bg-shadow .nav-bg,
.nav-item:nth-of-type(1):hover~.nav-bg-shadow .nav-bg,
.nav-item:nth-of-type(1):focus~.nav-bg-shadow .nav-bg {
  clip-path: inset(20px 638.29px 18px 0 round 19px);
}

.nav-item:nth-of-type(2).current~.nav-bg-shadow .nav-bg,
.nav-item:nth-of-type(2):hover~.nav-bg-shadow .nav-bg,
.nav-item:nth-of-type(2):focus~.nav-bg-shadow .nav-bg {
  clip-path: inset(20px 580.84px 18px 68.49px round 19px);
}

.nav-item:nth-of-type(3).current~.nav-bg-shadow .nav-bg,
.nav-item:nth-of-type(3):hover~.nav-bg-shadow .nav-bg,
.nav-item:nth-of-type(3):focus~.nav-bg-shadow .nav-bg {
  clip-path: inset(20px 511.65px 18px 125.94px round 19px);
}

<nav>
  <div class="container">
    <div class="nav-menu">
      <ul>
        <li class="nav-item current">
          <a href="#">Home</a>
        </li>
        <li class="nav-item" tabindex="0">
          <a href="about.html" tabindex="-1">About</a>
        </li>
        <li class="nav-item" tabindex="0">
          <a href="contact.html" tabindex="-1">Contact</a>
        </li>
        <div class="nav-bg-shadow">
          <div class="nav-bg">
            <li class="nav-item">
              <a href="#" tabindex="-1">Home</a>
            </li>
            <li class="nav-item">
              <a href="about.html" tabindex="-1">About</a>
            </li>
            <li class="nav-item">
              <a href="contact.html" tabindex="-1">Contact</a>
            </li>
          </div>
        </div>
      </ul>
    </div>
  </div>
</nav>

但这似乎是一个丑陋且不必要的复杂黑客。有没有更简单的方法可以做到这一点？