將鼠標懸停在父母的變化上兒童元素

我有一個漢堡菜單。我需要它，以便當您將鼠標懸停在漢堡菜單上時，它會更改其中的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>

來源

2016-03-04 Brown KL

爲什麼你保持CSS嵌套的方式？ –

@RajaprabhuAravindasamy它的SCSS –

@JacobGray哦，我明白了，我不知道。 –

你可以使用jQuery懸停要麼設置一個類，或更改CSS。

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

我會成立於懸停類，而不是設置與jQuery的顏色。

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

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

 
}

來源

2016-03-04 18:29:08

必須使用僞類：懸停

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

來源

2016-03-04 18:30:46

我試過了。沒有工作 –

我已經複製你的代碼，只是實現了僞類，它的工作。當您想要以懸停等事件處理的形式更改CSS中的樣式時，您必須使用僞類。除非你想使用腳本 –

編輯的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/

來源

2016-03-04 18:34:51

CSS可以簡單地爲你做到這一點。只需使用像這樣的東西：

#container:hover .inner { 
    opacity: 0.8 
}

來源

2016-03-04 18:41:37 Chelsea

將鼠標懸停在父母的變化上兒童元素

回答

相關問題