在父元素的悬停上更改标记子元素的颜色

Question

将鼠标悬停在其父元素li上，我尝试将标记的a标记的颜色从红色更改为黑色。

.header { 
 
    background-color: black; 
 
    height: 30px; 
 
    padding: 15px; 
 
    font-size: 20px; 
 
} 
 

 
.header_links { 
 
    list-style-type: none; 
 
    margin-top: 0px; 
 
} 
 

 
.header_links li a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 

 
.header_links li * { 
 
    display: inline-flex; 
 
} 
 

 
.header_links li { 
 
    display: inline-flex; 
 
    border: 1px solid white; 
 
    color: white; 
 
    background-color: black; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 2px; 
 
    padding-bottom: 2px; 
 
} 
 

 
.header_links li:hover { 
 
    cursor: pointer; 
 
    background-color: white; 
 
    color: black; 
 
} 
 

 
.header_links li i { 
 
    padding-top: 1px; 
 
    padding-right: 4px; 
 
}

<div class="header"> 
 
    <ul class="header_links"> 
 
    <li> 
 
     <a href="{{ url('/start') }}"> 
 
     <i class="fa fa-compass" aria-hidden="true"></i> 
 
     <div>Menue</div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="{{ url('/start') }}"> 
 
     <i class="fa fa-compass" aria-hidden="true"></i> 
 
     <div>Test</div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

我想它是这样的：

.header_links li:hover { 
    cursor: pointer; 
    background-color: white; 
    color: black; 
} 

但是这不会影响标签的颜色都没有。

我也试图利用重要：

.header_links li:hover { 
    cursor: pointer; 
    background-color: white; 
    color: black !important; 
} 

但是，这也不行。

Answer 1

添加一个新的选择.header_links li:hover a

.header { 
 
    background-color: black; 
 
    height: 30px; 
 
    padding: 15px; 
 
    font-size: 20px; 
 
} 
 

 
.header_links { 
 
    list-style-type: none; 
 
    margin-top: 0px; 
 
} 
 

 
.header_links li a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 

 
.header_links li * { 
 
    display: inline-flex; 
 
} 
 

 
.header_links li { 
 
    display: inline-flex; 
 
    border: 1px solid white; 
 
    color: white; 
 
    background-color: black; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 2px; 
 
    padding-bottom: 2px; 
 
} 
 

 
.header_links li:hover { 
 
    cursor: pointer; 
 
    background-color: white; 
 
} 
 

 
.header_links li:hover a { 
 
    color: black; 
 
} 
 

 
.header_links li i { 
 
    padding-top: 1px; 
 
    padding-right: 4px; 
 
}

<div class="header"> 
 
    <ul class="header_links"> 
 
    <li> 
 
     <a href="{{ url('/start') }}"> 
 
     <i class="fa fa-compass" aria-hidden="true"></i> 
 
     <div>Menue</div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="{{ url('/start') }}"> 
 
     <i class="fa fa-compass" aria-hidden="true"></i> 
 
     <div>Test</div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

如果你想改变它，你需要定位A标签。 因此改变

.header_links li:hover { 
color: black; 
} 

到

.header_links li a:hover { 
color: black; 
} 

，如果你不希望悬停添加到一个标签，你也可以做到这一点

.header_links li:hover a{ 
    color: black; 
}