Question

当我尝试在“a：hover”中更改bg颜色时，它不会完全填充旧的背景颜色。我应该在css中做些什么？

HTML

<header>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a href="#">ORDER</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">TESTIMONIALS</a></li>
      <li><a href="#">CAREERS</a></li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
  </nav>
</header>

CSS

header nav ul {
    margin-top:50px;
    margin-right:10px;
}
header nav ul li {
    float:left;
    background-color:#018343;
    list-style-type:none;
    margin:40px 5px 0 0;
    padding:5px;
    padding-right:10px;
    color:#fff;
    font-family:"Arial";
    font-weight:bold;
    font-size:16px;
    border-radius:6px 0px 6px 0px;
    text-align:center;
    box-shadow:1px 1px 7px rgba(0, 0, 0, 0.25);
    text-shadow:1px 1px 7px rgba(0, 0, 0, 0.5);
    color:#ff9000;
}
header nav ul li a {
    color:#ff9000;
    text-decoration:none;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
}
header nav ul li a:hover {
    color:#fff;
    background-color:#010101;
}

Answer 1

DEMO

CSS

.header nav ul {
    margin-top:50px;
    margin-right:10px;
}
.header nav ul li {
    float:left;
    background-color:#018343;
    list-style-type:none;
    margin:40px 5px 0 0;
    padding:5px;
    padding-right:10px;
    color:#fff;
    font-family:"Arial";
    font-weight:bold;
    font-size:16px;
    border-radius:6px 0px 6px 0px;
    text-align:center;
    box-shadow:1px 1px 7px rgba(0, 0, 0, 0.25);
    text-shadow:1px 1px 7px rgba(0, 0, 0, 0.5);
    color:#ff9000;
}
.header nav ul li a {
    color:#ff9000;
    text-decoration:none;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
}
.header nav ul li:hover {
    color:#fff;
    background-color:#010101;
}

在悬停时更改背景颜色

1 个答案: