更改我想在菜單圖標欄的顏色來改變鼠標懸停菜單圖標

Question

的顏色。到目前爲止，我只能改變背景顏色。有什麼建議麼？

小提琴：https://jsfiddle.net/Walter69/nwczmdah/5/

.container { 
display: inline-block; 
cursor: pointer; 
} 

.container:hover { 
color: #fff!important; 
background: #FF0000; 
} 

.bar1, .bar2, .bar3 { 
width: 35px; 
height: 5px; 
background-color: #000; 
margin: 6px 0; 
transition: 0.4s; 
} 

/* Rotate first bar */ 
.change .bar1 { 
transform: rotate(-45deg) translate(-9px, 6px); 
} 

/* Fade out the second bar */ 
.change .bar2 { 
opacity: 0; 
} 

/* Rotate last bar */ 
.change .bar3 { 
transform: rotate(45deg) translate(-8px, -8px); 
} 

Answer 1

您需要添加顏色時，懸停容器：

.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 { 
    background: #FFF; 
} 

https://jsfiddle.net/nwczmdah/6/