navbar hover effect выше горизонтального правила

Я проектирую новый веб-сайт, и я всегда трачу много времени на панели навигации, когда я это делаю. Следующий код имеет такой ожидаемый эффект:navbar hover effect выше горизонтального правила

HTML:

<div class="navbar"> 
    <a href="index.html">Home</a> 
    <a href="about.html">About</a> 
</div> 
<hr></hr>

CSS:

hr { 
    width: 80%; 
    border: 0; 
    height: 1px; 
    margin-top: 0px; 
    background-color: #000; 
} 

.navbar { 
    text-align: center; 
} 

.navbar a { 
    display: inline-block; 
    position: relative; 
    text-align: center; 
    color: #000; 
    text-decoration: none; 
    font-size: 20px; 
    overflow: hidden; 
    top: 5px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    padding-left: 30px; 
    padding-right: 30px; 
} 

.navbar a:after { 
    content: ""; 
    position: absolute; 
    background-color: #c00; 
    height: 2px; 
    width: 0%; 
    transform: translateX(-50%); 
    left: 50%; 
    bottom: 0; 
    transition: .35s ease; 
} 

.navbar a:hover:after { 
    width: 100%; 
}

Это работает в Chrome, Opera, и даже некоторые версии Internet Explorer, но другие браузеры ни о чем не могут:

Firefox (и некоторые версии IE):

Safari:

вот фрагмент кода:

hr { 
 
    width: 80%; 
 
    border: 0; 
 
    height: 1px; 
 
    margin-top: 0px; 
 
    background-color: #000; 
 
} 
 

 
.navbar { 
 
    text-align: center; 
 
} 
 

 
.navbar a { 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
    color: #000; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    overflow: hidden; 
 
    top: 5px; 
 
    padding-bottom: 10px; 
 
    padding-top: 10px; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
.navbar a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    background-color: #c00; 
 
    height: 2px; 
 
    width: 0%; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    bottom: 0; 
 
    transition: .35s ease; 
 
} 
 

 
.navbar a:hover:after { 
 
    width: 100%; 
 
}

<div class="navbar"> 
 
    <a href="index.html">Home</a> 
 
    <a href="about.html">About</a> 
 
</div> 
 
<hr>

Есть ли способ достичь предполагаемого эффекта без взлома браузера?

источник

2016-07-27 Mashpoe

ли вы сбросить CSS в вашей веб-странице уже? https://necolas.github.io/normalize.css/ –

Нет, я этого не делал. Я просто добавил его, и он исправил проблему для firefox, но не сафари ... Это было бы полезно узнать, когда я разрабатывал свой собственный сайт, спасибо! – Mashpoe

Мне нужно было посмотреть на предоставленные GIF на минуту, чтобы увидеть разницу ... вы уверены, что это разница, которая действительно имеет значение? При этом я бы предположил, что установка высоты навигатора a с высотой линии вместо padding-top/-bottom решит проблему. – TheThirdMan

Проблема может быть решена, выполнив следующие действия:

Добавить сброс CSS (можно нормализовать или Meyer сброса CSS)
Установить определенную высоту навигационной панели и элемента в Safari не имеет нужного уровня без высоты
Применение размер коробки: рамка; для легко стайлинг без особого расчета между обивка, граница, край в пределах один элемент. Кроме, я обычно использую границу навигационной панели вместо другого ч тега для строки в меню

источник

2016-07-27 03:46:18

navbar hover effect выше горизонтального правила

ответ

Смежные вопросы