更改我想在菜单图标栏的颜色来改变鼠标悬停菜单图标

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/