悬停上的白线

时间:2017-05-03 12:57:28

标签: html css

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

enter image description here

1 个答案:

答案 0 :(得分:2)

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

您正在设置:

.headerOption a{whatever: somevalue;}

在:

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

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