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

你必须使用伪类：悬停

'data_labels': { 'value': True, 'position' : 'outside_end', 'num_font':  {'rotation': 90} }

Answer 3

你可以使用jQuery hover来设置一个类，或者改变css。

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

我会在悬停时设置一个类，而不是用jquery设置颜色。

＆＃13;

$('.burger-menu').hover(function(){

    $( this ).addClass('red' );
  }, function() {
    $( this ).removeClass('red' );
  }

}

＆＃13;

Answer 4

CSS可以为您完成此操作。只需使用这样的东西：

#container:hover .inner {
  opacity: 0.8 
}

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

4 个答案: