导航活动链接背景更改鼠标悬停

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个实例。