悬停时的CSS菜单问题

Question

我有一个包含四个元素的菜单，每个元素都有不同的颜色。

我的挑战是在悬停时使每个元素变暗，我知道我可以使用不透明度来实现这一点，但在此之前，每次我将鼠标悬停在其中一个元素上时，它只会突出显示它的一部分并跳过填充。我知道这是一个愚蠢的问题，但这是我自 1999 年以来的第一份前端工作:)

你能帮我理解这里出了什么问题吗？谢谢大家。

这是菜单结构

  <div class="menu-bar-inner">
  <ul class="menu-bar-menu">
  <li class="color1"><a href="">Item 1</a></li>
  <li class="color2"><a href="">Item 2</a></li>
  <li class="color3"><a href="">Item 3</a></li>
  <li class="color4"><a href="">Item 4</a></li>
  </ul>

这是我的 CSS

 .menu-bar-menu li, .menu-bar-menu li a {

list-style: none;
float: left;
padding: 6px 20px 7px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}


.menu-bar-menu li a:hover {   
background-color: black;
}



.color1 {background-color: #ce5043}
.color2 {background-color: #fb8521}
.color3 {background-color: #444444}
.color4 {background-color: #b3c833}

Answer 1

你可以用它来悬停:

.menu-bar-menu li:hover, .menu-bar-menu li:hover a {   
    background-color: black;
}

当 li 悬停时，它会同时处理 li 元素及其子 anchor

演示:http://jsfiddle.net/DajQ9/1/