悬停时 li 的背景颜色无法正常工作

Question

我的简单水平导航栏有一个特定问题。当我为整个 ul 设置背景颜色时，我只会对文本进行悬停更改，而不会对背景进行更改。我试过设置 li:hover 和 a:hover 但一切都一样。例如，当我为 background-color 属性（黑色、红色...）设置不同的颜色时，一切都很好，但是使用 rgba 值它在大于 600px 的屏幕上不起作用。正如我所见，我希望对两者都有相同的效果，并且只设置不同的颜色会产生问题。有人可以告诉我我的错误在哪里，我该如何解决？

这是我的代码

  body {
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.item2 {
  grid-area: navbar;
}

.item2 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item2 ul li>a {
  display: block;
  text-decoration: none;
  text-align: center;
  color: ivory;
  padding: 5px;
  border-bottom: 1px solid saddlebrown;
  background-color: rgb(44, 33, 30);
}

.item2 li a:hover {
  color: sandybrown;
  background-color: rgba(44, 33, 30, 0.8);
}

@media only screen and (min-width: 600px) {
  .item2 ul {
    overflow: hidden;
    background-color: rgb(44, 33, 30);
  }
  .item2 ul li {
    display: inline;
    float: left;
  }
  .item2 ul li>a {
    display: inline-block;
    padding: 12px;
    border-right: 1px solid saddlebrown;
    background-color: rgb(44, 33, 30);
  }
  .item2 li:hover a {
    background-color: rgba(44, 33, 30, 0.8);
    color: sandybrown;
  }

<div class="item2">
  <ul>
    <li><a href="#">Biographie</a></li>
    <li><a href="#">Œuvre</a></li>
    <li><a href="#">L'homme politique</a></li>
    <li><a href="#">Postérité</a></li>
  </ul>
</div>

Answer 1

您在这里遇到的问题是由这种风格引起的：

\n\n

@media only screen and (min-width: 600px) {\n  .item2 ul {\n    overflow: hidden;\n    background-color: rgb(44, 33, 30); <--- container background.\n  }\n}\n

\n\n

它的背景相同，因此元素的背景不会rgba()清晰可见，我更改为color:#CCC以便您注意到问题：

\n\n

\r\n

\r\n

@media only screen and (min-width: 600px) {\n  .item2 ul {\n    overflow: hidden;\n    background-color: rgb(44, 33, 30); <--- container background.\n  }\n}\n

\r\n

body {\r\n  margin: 0;\r\n  padding: 0;\r\n  font-family: "Trebuchet MS", Helvetica, sans-serif;\r\n}\r\n\r\n.item2 {\r\n  grid-area: navbar;\r\n}\r\n\r\n.item2 ul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.item2 ul li>a {\r\n  display: block;\r\n  text-decoration: none;\r\n  text-align: center;\r\n  color: ivory;\r\n  padding: 5px;\r\n  border-bottom: 1px solid saddlebrown;\r\n  background-color: rgb(44, 33, 30);\r\n}\r\n\r\n.item2 li a:hover {\r\n  color: sandybrown;\r\n  background-color: rgba(44, 33, 30, 0.8);\r\n}\r\n\r\n@media only screen and (min-width: 600px) {\r\n  .item2 ul {\r\n    overflow: hidden;\r\n    background-color: #CCC;\r\n  }\r\n  .item2 ul li {\r\n    display: inline;\r\n    float: left;\r\n  }\r\n  .item2 ul li>a {\r\n    display: inline-block;\r\n    padding: 12px;\r\n    border-right: 1px solid saddlebrown;\r\n    background-color: rgb(44, 33, 30);\r\n  }\r\n  .item2 li:hover a {\r\n    background-color: rgba(44, 33, 30, 0.8);\r\n    color: sandybrown;\r\n  }

\r\n

\r\n

\r\n

\n