Ссылка при наведении курсора не отображает фон полностью - PullRequest
Новая
       40

Ссылка при наведении курсора не отображает фон полностью

0 голосов
/ 14 октября 2019

При наведении курсора на фон с изменяемым цветом помещается только ссылка, а не полный фон. Перепробовал все и не могу заставить его работать, может кто-нибудь помочь, пожалуйста, 

nav ul {
  font-family: 'Indie Flower', cursive;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3333FF;
  -webkit-transition: max-height 0.4s;
  -webkit-transition: max-height 0.4s;
  -ms-transition: max-height 0.4s;
  -moz-transition: max-height 0.4s;
  -o-transition: max-height 0.4s;
  transition: max-height 0.4s;
}

nav ul li {
  display: inline-block;
  padding: 16px;
}

a:link {
  text-decoration: none;
  color: inherit;
}

a:visited {
  color: white;
}

a:hover {
  background-color: #0000EE;
}
<nav>
  <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="# ">Contacts</a></li>
    <li><a href="#">Policies</a></li>
    <li><a href="#">Volunteer</a></li>
    <li><a href="#">Useful links</a></li>
  </ul>
</nav>

Ответы [ 2 ]

0 голосов
/ 14 октября 2019

Изменить эффект наведения на тег li вместо тега 

nav ul {
  font-family: 'Indie Flower', cursive;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3333FF;
  -webkit-transition: max-height 0.4s;
  -webkit-transition: max-height 0.4s;
  -ms-transition: max-height 0.4s;
  -moz-transition: max-height 0.4s;
  -o-transition: max-height 0.4s;
  transition: max-height 0.4s;
}

nav ul li {
  display: inline-block;
  padding: 16px;
}

nav ul li:hover {
  background-color: #0000EE;
}

a:link {
  text-decoration: none;
  color: inherit;
}

a:visited {
  color: white;
}
<nav>
  <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="# ">Contacts</a></li>
    <li><a href="#">Policies</a></li>
    <li><a href="#">Volunteer</a></li>
    <li><a href="#">Useful links</a></li>
  </ul>
</nav>
0 голосов
/ 14 октября 2019

Измените элементы a на display: inline-block; и переместите отступ от li до a: 

a {
  display: inline-block;
  padding: 16px;
}

Пример: 

nav ul {
  font-family: 'Indie Flower', cursive;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3333FF;
  transition: max-height 0.4s;
}

nav ul li, a {
  display: inline-block;
}

a {
  padding: 16px;
}

a:link {
  text-decoration: none;
  color: inherit;
}

a:visited {
  color: white;
}

a:hover {
  background-color: #0000EE;
}
<nav>
  <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="# ">Contacts</a></li>
    <li><a href="#">Policies</a></li>
    <li><a href="#">Volunteer</a></li>
    <li><a href="#">Useful links</a></li>
  </ul>
</nav>
...