想要将悬停效果添加到多个跨度

Question

Heyah，

我制作了一个汉堡菜单图标，当你将鼠标悬停在它上面时，我希望它能改变颜色，但不知何故它不起作用，我不明白为什么。 我有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>