導航活動鏈接背景更改鼠標懸停

Question

我試圖做一個像下面的導航div，但是當我將鼠標懸停在活動鏈接上時，它仍然獲得灰色背景而不是紅色背景。我該如何改變這一點？我不想更改活動鏈接的紅色背景。

#navigation ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: black; 
 
    } 
 

 
    #navigation li { 
 
     float: left; 
 
    } 
 

 
    #navigation li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    } 
 

 
    #navigation li a:hover { 
 
    background-color: grey; 
 
    } 
 

 
    #navigation .active, 
 
    #navigation .active:hover { 
 
    background-color: red; 
 
    }

<div id="navigation"> 
 
    <ul> 
 
     <li class="active"><a href="#">home page</a></li> 
 
     <li><a href="#">Work</a></li> 
 
     <li><a href="#">Page2</a></li> 
 
     <li><a href="#">Page3</a></li> 
 
    </ul> 
 
    </div>

Answer 1

試試這個 只有一行變化，

#navigation ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: black; 
 
    } 
 

 
    #navigation li { 
 
     float: left; 
 
    } 
 

 
    #navigation li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    } 
 

 
    #navigation li a:hover { 
 
    background-color: grey; 
 
    } 
 

 
    #navigation .active a, 
 
    #navigation .active:hover a{ 
 
    background-color: red; 
 
    }

<div id="navigation"> 
 
    <ul> 
 
     <li class="active"><a href="#">home page</a></li> 
 
     <li><a href="#">Work</a></li> 
 
     <li><a href="#">Page2</a></li> 
 
     <li><a href="#">Page3</a></li> 
 
    </ul> 
 
    </div>

你也可以使用:not(.active) a insted的的#navigation .active a

Answer 2

與Active款式您的目標li，而不是a。添加a到您的選擇：

#navigation .active a, 
#navigation .active a:hover { 
    background-color: red; 
} 

Answer 3

要改變懸停爲紅色，將其應用於#navigation li a:hover當前您正在設置灰色。

Answer 4

更改此

#navigation li a:hover { 
background-color: grey; 
} 

到

#navigation li a:hover { 
background-color: red; 
} 

Answer 5

我會嘗試從CSS的第一部分去除#navigation .active,，看看它的工作原理呢。您也可以刪除#navigation，因爲.active類只有1個實例。