悬停时出现白线答案

【问题标题】：White line on hover悬停时出现白线
【发布时间】：2017-05-30 21:19:03
【问题描述】：

当我将鼠标悬停在 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;
}

【问题讨论】：

能否也请包含您的 CSS。
我想你的意思是text-decoration: none;。
是的，对不起。修好了
您提供的 CSS 与您提供的图片不匹配。
问题解决了，原来是 bootstrap 的样式覆盖了我的样式。 !important 解决了。

标签： html css

【解决方案1】：

我认为你的 CSS 顺序实际上是错误的。

你正在设置：

.headerOption a{whatever: somevalue;}

开启：

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

它希望在 div 中设置锚标记的样式，但没有。

【讨论】：

还是没有去掉白线
请不要在您的帖子中添加有关您的编辑的注释。创作编辑时，您应该在“编辑摘要”字段中提供编辑说明。