为什么悬停时在未排序的列表中选择了另一个项目？

如何解决为什么悬停时在未排序的列表中选择了另一个项目？

我创建了一个由未排序列表和列表项组成的导航栏。其中有一个锚标签，它又包含一个 svg 图形和一个 span 元素。 我只是不明白为什么 :hover 中的元素的行为如下所述。

我将光标移到列表项上，它完全符合我在 css 中定义的内容。但是如果我去 svg，那么下面的列表项就会改变。

（在 Codepen 上你可以看到完整的代码：https://codepen.io/su3n/pen/OJbvxOX）

我的 HTML 结构是这样的：

<nav class="navbar">
  <ul class="navbar-lst">
    
    <li class="navlst-item logo">
      <a href="#" class="navlst-link">
       
        <span class="link-txt fade-in"></span>
      </a>
    </li>
    
    <li class="navlst-item active">
       <a href="#" class="navlst-link">
        <svg></g></svg>
         <span class="link-txt fade-in">Home</span>
       </a>
    </li>

<!-- etc -->

</ul>
</nav>

而我的 CSS 是这样的：

.navbar {
  width: 5rem;
  height: 100vh;
  position: fixed;
  background-color: var(--bg-primary);
  transition: width 300ms ease;
}

.navbar-lst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.navlst-item {
  width: 100%;
  filter: opacity(0.7) grayscale(0.7);
}

.navlst-link:hover,.active{
  background-color: rgba(0,0.1);
  Box-shadow: 0.2rem 0px 0px var(--lila) inset;
  filter: opacity(1) grayscale(0);
}

.navlst-link svg {
  min-width: 3rem;
  max-width: 3rem;
  padding-left: 1.1rem;
}

.navlst-item:last-child {
  margin-top: auto;
}

.navlst-link {
  height: 5rem;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.link-txt {
  padding-left: 1rem;
  flex-shrink: 0;
  display: none;
  color: red;
}

.link-txt:first-child {
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.navbar:hover {
  width: 20rem;
}

.navbar:hover .link-txt{
  display: block;
  color: white;
}