Как сделать эффект наведения на тег ul li - PullRequest
Новая
       26

Как сделать эффект наведения на тег ul li

1 голос
/ 12 апреля 2020

Я пытаюсь сделать эффект наведения для моих ссылок на панели навигации, в котором, когда они наведены, нижняя граница границы оживляет его. Я попытался использовать это: 

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

Это частично работает, нижняя строка появляется при наведении (очевидно, без анимации, потому что я еще не сделал эту часть). Дело в том, что когда они находятся, появляется не только нижняя граница, но и все параметры, например, если нижняя граница заставляет всю навигационную панель немного перемещать каждую ссылку в противоположном направлении, как если бы они пытались держаться на расстоянии друг от друга. Как я могу исправить эту проблему? Я оставлю код HTML на панели навигации и код css:

HTML: 

    <ul class="nav-links">
    <li><a href="">HOME</a></a></li>
    <li><a href="">PORTFOLIO</a></a></li>
    <li><a href="">SUBMIT</a></a></li>
    <li><a href="">CONTACT</a></a></li>
    <li><a href="">ABOUT</a></a></li>
    </ul>

CSS: 

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

body {
background-color: #900c3f;
}

img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}

nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}

.nav-links li {
list-style: none;
}

.nav-links a {
text-decoration: none;
font-family: Poppins;
color: #F5F5F5;
letter-spacing: 3px;
font-weight: bold;
font-size: 130%;
}

Есть ли какие-либо div, которые должны быть добавлены в navbar? Или то, что я делаю, не имеет смысла? Я все еще учусь, поэтому возможно, что я делаю беспорядок.

Вот скриншот на всякий случай:

Снимок экрана зависшего navbar

Спасибо ТАК сообщество!

Ответы [ 2 ]

0 голосов
/ 12 апреля 2020

Добавить 

li a {box-sizing: border-box;width: 100%;padding: 5px;border-top: 0px;border-bottom:0px;border-left: 0px;border-right: 0px;}

Примечание: при загрузке отображается li a. Когда завис, активен li: hover a

0 голосов
/ 12 апреля 2020

Это то, что вы спрашиваете? (Вы должны просматривать в полноэкранном режиме для хорошей визуализации) 

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #900c3f;
}

img {
  width: 130px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  width: 80%;     
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-family: Poppins;
  color: #F5F5F5;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 130%;
  margin: 10px;
}

.nav-links li a:hover {
  border-bottom: 5px solid white;
  padding-bottom: 3px;
}
<ul class="nav-links">
  <li><a href="">HOME</a></li>
  <li><a href="">PORTFOLIO</a></li>
  <li><a href="">SUBMIT</a></li>
  <li><a href="">CONTACT</a></li>
  <li><a href="">ABOUT</a></li>
</ul>
...