懸停的白線

Question

當我將鼠標懸停在div上時，div外側有一條白線。 我試過用文字裝飾：沒有;

任何想法如何刪除此？

這是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中的錨標記，但沒有一個。