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;
}

悬停时出现小线

1 个答案: