Как упомянул Md. Salahuddin - самое простое было бы добавить немного стилей :hover
к вашим элементам, подчеркивание или границу в зависимости от того, где вы хотите линию.Г-н Саладахуддин предоставил примеры для подчеркивания с помощью таблиц стилей CSS и jquery.
Лично я предпочитаю использовать border-bottom
, так как это позволяет вам выбрать цвет и толщину, а также padding-bottom
, чтобы определить, как далеко линия от текста.Я добавляю белую рамку (или любой другой цвет фона), чтобы другие элементы не сдвигались вниз при наведении.
nav a {
border-bottom: 3px white solid;
}
nav a:hover {
border-bottom: 3px tomato solid;
}
Или, если вы хотите, чтобы анимация перемещалась поэкран , то это решение с использованием jquery и div (а не hr
).Это лучше всего работает в полноэкранном режиме, вам нужно добавить отзывчивую проверку для небольших экранов (т.е. использовать sidenav или аналогичный на мобильных телефонах).
$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));
$('nav a').hover(function(){
$(".underline-nav").css("width", $(this).width());
$(".underline-nav").css("margin-left", $(this).css("margin-left"));
var position = $(this).position();
$(".underline-nav").css("left", position.left);
})
.underline-nav {
background: red;
height: .25rem;
position: absolute;
top: 1.65em;
transition:all ease 0.3s;
}
nav{
font-size: 1.85em;
}
nav a{
text-decoration: none;
color:#000;
float:left;
margin-top: 1vh;
}
#one{
margin-left: 2vw;
}
.floatright{
float:right;
padding-right: 3vw;
}
.floatright a{
margin-left: 4vw;
}
a:hover ~ hr{
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<nav>
<a id="one" href="#">name</a>
<div class="floatright">
<a id="tt" href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#">Link Four</a>
</div>
<div class="underline-nav">
</div>
</nav>
</div>