将鼠标悬停在父元素更改子元素上

Question

我有一个汉堡包菜单。我想要它，以便当您将鼠标悬停在汉堡菜单上时，它会更改其中span元素的颜色。

我想要它，以便当您将鼠标悬停在汉堡菜单上时，它会更改汉堡菜单中span元素的颜色。我试着去做

  .hamburger-menu:hover span {
      background-color: red;
  }

这是汉堡菜单的CSS：

    .hamburger-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        outline: none;
        border: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        width: 60.5px;
        height: 100%;
        background: none;
        border-right: 1px solid #e5e5e5;

        span {
            cursor: pointer;
            border-radius: 5px;
            height: 2px;
            width: 20px;
            background-color: #a3a3a3;
            display: block;
            content: '';
            margin: 4px auto 0 auto;

            &:nth-child(1) {
                margin-top: 26px;
            }
        }
    }

    <div class="hamburger-menu">
       <span></span>
       <span></span>
    </div>

Answer 1

编辑scss文件并使用&

.hamburger-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        outline: none;
        border: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        width: 60.5px;
        height: 100%;
        background: none;
        border-right: 1px solid #e5e5e5;
       /* add this */
        &:hover span {
           background-color:red;
        }

        span {
            cursor: pointer;
            border-radius: 5px;
            height: 2px;
            width: 20px;
            background-color: #a3a3a3;
            display: block;
            content: '';
            margin: 4px auto 0 auto;

            &:nth-child(1) {
                margin-top: 26px;
            }
        }
    } 

https://jsfiddle.net/LLhefe2p/

Answer 2

你必须使用伪类:hover

.hamburger-menu:hover span { 
    background-color: red;
}

Answer 3

您可以使用jQuery悬停来设置一个类，或者更改css。

https://api.jquery.com/hover/

我会将类设置为hover，而不是使用jquery设置颜色。

​

$('.burger-menu').hover(function(){

    $( this ).addClass('red' );
  }, function() {
    $( this ).removeClass('red' );
  }

}

​