html - 突出显示 anchor 元素时分配背景颜色的问题

Question

当鼠标悬停在导航栏上的按钮上时，我一直在尝试为它们添加红色背景。我似乎无法让它出现，不确定我的问题是什么。我看过多个视频，但似乎无法正确理解。我正在通过 codepen 使用 bootstrap 4。不是很有经验，所以无法正确排除故障。希望有人能帮助弄清楚我到底做错了什么。

这是笔的链接:https://codepen.io/tazmancooks/pen/WzPROR

nav ul li a.active {background: #E2472F;color: #fff;border-radius: 6px;

代码是否没有生效(假设我已经正确使用了它)

Answer 1

下面的代码可以解决您的问题。

nav .logo {
  padding: 22px 20px;
  height: 80px;
  float: left;
  transition: .3s;
}

nav ul {
  list-style: none;
  float: right;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul il {
  list-style: none;
}

nav ul li a {
  line-height: 80px;
  color: #151515;
  padding: 12px 30px;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s;
  
}

nav ul li a:focus {
  outline: none;
}

nav ul li a.active,
nav ul li a:hover {
  background: #E2472F;
  color: #222;
  text-decoration: none;
}

<nav>
  <div class="logo">Logo</div>
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Contact</a></li>
   </ul>  
</nav>