メニューアイコンの色を変更してください

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/