悬停链接不完全显示背景答案

【问题标题】：Hover link does not display background fully悬停链接不完全显示背景
【发布时间】：2020-02-10 14:24:56
【问题描述】：

当我悬停时，改变颜色的悬停背景只适合链接周围，而不适合整个背景。尝试了一切，但无法使其正常工作，任何人都可以帮忙

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>

【问题讨论】：

标签： css hyperlink background hover

【解决方案1】：

将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>

【讨论】：

【解决方案2】：

将悬停效果更改为 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>

【讨论】：