html - 我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block

Question

我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block 。我可以分别创建不同的悬停颜色 block 或不同的背景颜色 block ，但不能一起创建。所以请告诉我如何在 li 类中将两者相加。

下面的代码用于创建导航栏

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 元素中。

样式:

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