我想創建一個具有不同背景顏色塊和不同懸停顏色塊的導航欄塊

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>