Маленькая линия появляется при наведении курсора на

Question

Итак, у меня есть сетка из 6 блоков, которая будет ссылаться на подстраницы. При наведении курсора на эти блоки в сафари появляется небольшая строка. (Я не уверен, но это выглядит как пиксель дрожание или что-то подобное)

Живой пример здесь: 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; 
}