我想创建一个导航栏块，它具有不同的背景颜色块和不同的悬停颜色块

Question

我想创建一个导航栏块，它具有不同的背景颜色块和不同的悬停颜色块。我可以单独创建不同的悬停颜色块或不同的背景颜色块，但不能一起创建它。所以请告诉我如何在李班中将两者加在一起。

以下代码用于创建导航栏

header {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  background-color: #373948;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 30px;
}

header h1 {
  float: left;
  margin: 5px 0px;
  color: white;
  font-family: 'Meddon', cursive;
}

header nav ul {
  height: 70px;
  float: right;
}

header nav ul li {
  height: 70px;
  display: inline-block;
}

header nav ul li a {
  height: 30px;
  display: block;
  padding: 17px 20px;
  color: white;
  font-size: 2.2em;
  text-decoration: none;
  border-top: 3px solid #373948;
  border-bottom: 3px solid #373948;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  -o-transition: color 1s ease;
  transition: color 1s ease;
}

以下代码适用于不同链接的不同悬停背景颜色。请添加更改，这可能是错误的。

header nav ul li #link1 a:hover{
  background-color: #373948;
}

header nav ul li #link2 a:hover{
  background-color: #00ff00;
}

header nav ul li #link3 a:hover{
  background-color: #ff0000;
}

header nav ul li #link4 a:hover{
  background-color: #0000ff;
}

以下代码适用于不同链接的不同背景颜色。

header nav ul li a.link-1 { background-color: #00c0e4; }
header nav ul li a.link-2 { background-color: #e6567a; }
header nav ul li a.link-3 { background-color: #eac14d; }
header nav ul li a.link-4 { background-color: #5bd999; }

现在请告诉我如何添加悬停和简单的背景颜色，如上面两段代码所示。

<header>
  <nav role='navigation'>
    <ul>
      <li><a  href="#"></a></li>
       <li><a href="#"></a></li>
       <li><a  href="#"></a></li>
      <li><a  href="#"></a></li>
    </ul>
  </nav>  
</header>

Answer 1

您应该创建不同的css类，并将它们添加到不同的li元素中。

css：

.red {background-color: rgb(240,0,0);color: white;}
.red:hover {background-color: rgb(255,0,0);}
.green {background-color: rgb(0,240,0);color: black;}
.green:hover {background-color: rgb(0,255,0);}

html：

<ul>
<li class="red">bloc with red bg</li>
<li class="red">bloc with red bg</li>
<li class="green">bloc with green bg</li>
</ul>