在父元素的懸停上更改標記子元素的顏色

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; 
}