logo标签列表

li元素的鼠标悬停背景颜色不能正确显示

htmlcss
5
我有一个关于我的简单水平导航栏的具体问题。当我为整个ul设置背景颜色时，仅文本的悬停会有变化，而背景则没有。我尝试设置li:hover和a:hover，但一切都是一样的。例如，当我为background-color属性设置不同的颜色（黑色、红色……）时，一切都很好，但是在大于600px的屏幕上，使用rgba值就无法实现。我想在两者上获得相同的效果，只设置不同的颜色就出现了问题。请问有人可以告诉我我的错误在哪里以及如何修复吗？
这是我的代码： 

  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>

3个回答
2

如果可能的话，将悬停效果应用于锚点标记

a:hover{}

1
你的:hover选择器太弱了，应该与非:hover选择器类似。
.item2 ul li > a {}
.item2 ul li > a:hover {}

这对我很有效：

这对我很有效：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    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 ul li > a:hover {
      color: sandybrown;
      background-color: red;
    }

    @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 ul li > a:hover {
        background-color: yellow;
        color: sandybrown;
      }
    }

  </style>
</head>
<body>


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

</body>
</html>
是的，它有效，我已经尝试过了。但当我设置“background-color: rgba(44, 33, 30, 0.8);”时，屏幕大于600像素时就会出现问题。 - marko_n
:hover 必须放在 a 后面，而不是 li 后面。 - Marc
1
这里出现问题的原因是使用了以下样式：

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

这是相同的背景色，所以元素不会有rgba()背景色变得清晰可见，我将其更改为color:#CCC，以便您注意到此问题：

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: #CCC;
  }
  .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>

1
我明白了。当我反转颜色时，一切看起来都更好。非常感谢！ - marko_n
1
很高兴能帮忙 :) - ROOT
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接