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

Question

我想创建具有不同背景颜色块和不同悬停颜色块的导航栏块。我可以分别创建不同的悬停颜色块或不同的背景颜色块，但不能一起创建。所以请告诉我如何在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; 
 
}

在下面的代码是用于不同悬停背景颜色不同links.please添加的变化，这可能是错误的。

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>