悬停时出现小线

Question

所以我有一个由 6 个块组成的网格，它们将链接到子页面。将鼠标悬停在这些块上时，Safari 中会出现一条小线。 （我不确定，但它看起来像像素抖动或类似的东西）

这里是一个活生生的例子：http://www.scoutsoverijse.be/test/（您必须点击导航栏中的“takken”）

有人知道为什么会出现这条小线吗？有点烦人……

html:

<section id="takken-text" class="takken-section">           
    <div class="square">
        <div class="tak-item">
            <a href="#">Kapoenen</a>
        </div>
    </div>
    <div class="square">
        <div class="tak-item">
            <a href="#">Welpen</a>
        </div>
    </div> 
    ...  
    <div class="square">
        <div class="tak-item">
            <a href="#">Akabe</a>
        </div>
    </div>                        
</section>

css：

.takken-section {
    padding: 0px 30px;
    background-color: rgba(255,255,255,0);
    font-family: 'Raleway', sans-serif;
    position: relative; 
    overflow: hidden;
    top: 0; 
    right: 0;
    margin-bottom: 20px;
}

.square {
    float:left;
    position: relative;
    width: 31%;
    padding-bottom: 18%; /* = width for a 1:1 aspect ratio */
    margin: 1% 1.16%;
    overflow: hidden;
}

.tak-item {
    position:absolute;
    height:100%; 
    width:100%; 
    padding: 0;
}

.tak-item > a {
    height: 100%;
    width: 100%;
}

.tak-item > a:link, .tak-item > a:visited {
    background-color: rgba(255,255,255,0.75);
}

.tak-item > a:hover {
    background-color: rgba(50,50,50,0.5);
}

Answer 1

这是由于轮廓。在您的 CSS 文件中添加以下代码。

.active > a, a:hover {
    background-color: rgba(200, 200, 200, 0.3);
    outline: medium none;
}