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

Question

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

以下是笔的链接：https://codepen.io/tazmancooks/pen/WzPROR

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

代码是否未生效（假设我已正确使用它）

Answer 1

您在codepen中的当前代码如下：

nav ul li a.active a:hover {

这不起作用，因为它在a:hover内寻找a.active。我认为相反，你正在寻找这个：

nav ul li a.active,
nav ul li a:hover {
  /* insert styling */
]

Answer 2

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您似乎没有为WKWebview分配背景色尝试此代码。

:hover

Answer 4

我发布了Code pen Link。你可以检查，我认为这将有助于你解决问题。

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 li a {
  line-height: 80px;
  color: #151515;
  padding: 12px 30px;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s;}

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

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

https://codepen.io/anon/pen/qogxYV