如何在悬停时更改多个项目？

Question

当我将鼠标悬停在li元素上时，我想更改悬停时边框颜色相同的svg图标和链接。

当我将鼠标悬停在li元素上时，边框的底部和链接正在更改，但是唯一不起作用的是svg图标。也许我的HTML结构不正确？

.sub-nav {
  background-color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  position: relative;
  z-index: 10;
  margin-bottom: 1.2rem;
  margin-top: -3.8rem;
  list-style: none;
  box-shadow: $shadow-light;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &__item {
    padding: 1.4rem 3rem;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    &:hover {
      border-color: $color-blue;
      span {
        color: $color-blue;
      }
    }
  }
  &__link {
    border-bottom: 3px solid transparent;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &__icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-bottom: .3rem;
  }
}

<div class="main">
  <ul class="sub-nav">
    <li class="sub-nav__item">
      <a href="#" class="sub-nav__link">
        <svg class="sub-nav__icon">
                                <use xlink:href="img/sprite.svg#icon-sphere"></use>
                            </svg>
        <span>timeline</span>
      </a>
    </li>
  </ul>
</div>

Answer 1

您可以尝试这样做。

pointer2 = &a;
pointer3 = &a;