悬停上的白线

Question

当我将鼠标悬停在div上时，div的外侧有一条白线。 我尝试过text-decoration：none;

知道如何删除它？

这是html

<a href="/" style="color:white">
  <div class="headerOption">
    <p>
      Home
    </p>
  </div>
</a>

SCSS

 .headerOption {
    border-radius: 5px;
    width: 6vw;
    height: 2.8vw;
    font-size: 0.97vw;
    font-weight: 500;
    @include normal;
    font-family: "Rubik-Medium", sans-serif;
    cursor: pointer;

    p {
        position: relative;
        top: 30%;
    }

    &:active {
        background-color: rgba(255, 255, 255, 0.1);
    }

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);

    }


}

a:hover {
  text-decoration: none;
}

Answer 1

你认为你的CSS确实按照错误的顺序排列。

您正在设置：

.headerOption a{whatever: somevalue;}

在：

<a>
    <div class="headerOption"></div>
</a>

它正在寻找在div中设置锚标签的样式，但没有一个。