想要为多个范围添加悬停效果

Question

嘿嘿，

我制作了一个汉堡菜单图标，我希望当您将鼠标悬停在它上面时它会改变颜色，但不知何故它不起作用，我不明白为什么。 我有这 3 个跨度，当单击菜单时，它们只变成两个，并且我让悬停效果对每个跨度不起作用，但我希望所有跨度一次都改变颜色。

$(document).ready(function(){
$("#burger-container").on('click', function(){
$(this).toggleClass("open");
});
});

#burger-container{
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
}
#burger{
cursor: pointer;
display: block;
width: 50px;
height: 50px;
}
#burger span{
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2){
width: 0;
opacity: 0;
}
#burger-container.open span:nth-child(3){
transform: rotate(45deg);
top: -13px;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top: 13px;
}
span.hover:hover{
background: #666666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="burger-container">
<div id="burger">
<span class="hover">&nbsp;</span>
<span class="hover">&nbsp;</span>
<span class="hover">&nbsp;</span>
</div>
</div>

Answer 1

当.hover的父#burger:hover悬停时，您应该更改其范围的颜色：

#burger:hover .hover{
background: #666666;
}

$(document).ready(function(){
$("#burger-container").on('click', function(){
$(this).toggleClass("open");
});
});

#burger-container{
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
}
#burger{
cursor: pointer;
display: block;
width: 50px;
height: 50px;
}
#burger span{
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2){
width: 0;
opacity: 0;
}
#burger-container.open span:nth-child(3){
transform: rotate(45deg);
top: -13px;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top: 13px;
}
#burger:hover .hover{
background: #666666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="burger-container">
<div id="burger">
<span class="hover">&nbsp;</span>
<span class="hover">&nbsp;</span>
<span class="hover">&nbsp;</span>
</div>
</div>