html - 在水平无序列表中悬停时更改背景颜色？

Question

我正在制作一个小的“登录/注册”框以固定在页面顶部。但是，我无法让水平列表在悬停时更改背景颜色。这是代码:

/* Regbox */
ul#regbox{
  width: auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}
ul#regbox li{
  list-style: none;
  display: inline;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}
ul#regbox li:last-child{
  border-bottom-right-radius: 5px;
}
ul#regbox li a{
  text-decoration: none;
  padding: 5px;
}
a:hover{
background-color: rgba(100, 100, 100, 0.5);
border-radius: 5px;
}

  <div id="regbox">
    <ul id="regbox">
      <li><a href="">Login</a>
      <li><a>|</a>
      <li><a href="">Register</a>
      </ul>
  </div>

我希望列表条目在悬停时改变颜色，类似于这样:

ul#navigation{
  width: 12px;
  float: left;
  padding: 0;
  position: fixed;
}
ul#navigation li{
  list-style: none;
  background-color: rgba(77, 77, 77, 0.8);
  float: left;
  font-size: 20px;
  margin: 0;
  width: 70px;
}
ul#navigation li:last-child{
    border-bottom-left-radius: 5px;
}
ul#navigation li:first-child{
    border-top-left-radius: 5px;
}
ul#navigation li a{
  display: block;
  padding: 5px;
  text-decoration: none;
}
a:link, a:visited{
  color: rgb(0, 0, 0);
}
a:hover{
background-color: rgba(77, 77, 77, 0.5);
border-radius: 5px;
}

  <nav>
  <ul id="navigation">
  <li><a href="main.html">Home</a>
  <li><a href="store.html">Store</a>
  <li><a href="about.html">About</a>
</ul>
</nav>

我试过将显示设置为悬停时“阻止”，但这只会破坏列表。

在此先感谢您的帮助

/伊瓦尔

Answer 1

我伪解决了它。相反，我写它来改变 <li> 的颜色背景而不是 <a>背景。它现在看起来/像这样工作:

ul#regbox{
  width: auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}
ul#regbox li{
  list-style: none;
  display: inline;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}
ul#regbox li:last-child{
  border-bottom-right-radius: 5px;
}
ul#regbox li a{
  text-decoration: none;
  padding: 5px;
}
ul#regbox li:last-child:hover{
  background-color: rgba(64, 64, 64, 1);
}
ul#regbox li:first-child:hover{
  background-color: rgba(64, 64, 64, 1);
}

  <div id="regbox">
    <ul id="regbox">
      <li><a href="">Logga in</a>
      <li><a>|</a>
      <li><a href="">Registrera dig</a>
      </ul>
  </div>

如果有人有更好的解决方案，我会洗耳恭听!