根據BG圖像動態更改「漢堡包」導航

Question

我正在尋找一種方法來動態更改「漢堡包」導航元素的顏色，具體取決於它漂浮在頂部的圖像的顏色。

我在我的文本元素上使用了Kenneth Cache的'backgroundcheck.js'腳本。這是通過（無論是分別或.background--light.background--dark）刪除圖像的顏色，然後應用類，但它似乎並沒有對我的漢堡包可能原因有二 -

• 我使用僞類（ ::before和::after）
• 導航使用background-color但我不能在我.background-light或background--dark元素使用，因爲它那麼我這就需要有一個「隱形」 BG等元素罷了。

我的漢堡包是建立如下 -

$(document).ready(function() { 
 
\t jQuery('.mobilemenu').click(function(e) { 
 
\t  jQuery(this).toggleClass('is-active'); 
 
\t  jQuery('.mobile-nav').toggleClass('active'); 
 

 
\t  var delay = 100; 
 
\t  $('.linkitem').each(function(i, e) { 
 
\t  setTimeout(function() { 
 
\t   $(e).toggleClass('animate'); 
 
\t  }, i * delay); 
 
\t  }); 
 
\t }); 
 
\t });

.mobile-nav { 
 
    width: 100%; 
 
    height: 0%; 
 
    opacity: .0; 
 
    background-color: #000000; 
 
    position: fixed; 
 
    visibility: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 1000; 
 
    transition: height .25s ease-in-out, opacity .55s; 
 
    -moz-transition: height .25s ease-in-out, opacity .55s; 
 
    -webkit-transition: height .25s ease-in-out, opacity .55s; 
 
} 
 
.mobile-nav.active { 
 
    display: block; 
 
    visibility: visible; 
 
    opacity: .85; 
 
    height: 100%; 
 
    transition: height .35s ease-in-out, opacity .55s; 
 
    -moz-transition: height .35s ease-in-out, opacity .55s; 
 
    -webkit-transition: height .35s ease-in-out, opacity .55s; 
 
} 
 

 
.mobile-link-container { 
 
    visibility: inherit; 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.mobile-links { 
 
    visibility: inherit; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color: #FFFFFF; 
 
    padding-left: 5%; 
 
    font-size: 3.5em; 
 
    letter-spacing: .1em; 
 
    list-style-type: none; 
 
} 
 
.mobile-links ul { 
 
    list-style-type: none; 
 
    padding-left: 0; 
 
} 
 
.mobilemenu { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 35px; 
 
    height: 50px; 
 
    font-size: 0; 
 
    text-indent: -9999px; 
 
    appearance: none; 
 
    box-shadow: none; 
 
    border-radius: none; 
 
    border: none; 
 
    cursor: pointer; 
 
    transition: background 0.3s; 
 
    z-index: 1010; 
 
    background: none; 
 
} 
 
.mobilemenu:focus { 
 
    outline: none; 
 
} 
 
.mobilemenu span { 
 
    display: block; 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 5px; 
 
    right: 5px; 
 
    height: 3px; 
 
    background: #000000; 
 
} 
 
.mobilemenu span::before, 
 
.mobilemenu span::after { 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 3px; 
 
    background-color: #000000; 
 
    content: ""; 
 
} 
 
.mobilemenu span::before { 
 
    top: -8px; 
 
} 
 
.mobilemenu span::after { 
 
    bottom: -8px; 
 
} 
 
.mobilemenu--htx { 
 
    background-color: none; 
 
} 
 
.mobilemenu--htx span { 
 
    transition: background 0s 0.3s; 
 
} 
 
.mobilemenu--htx span::before, 
 
.mobilemenu--htx span::after { 
 
    transition-duration: 0.3s, 0.3s; 
 
    transition-delay: 0.3s, 0s; 
 
} 
 
.mobilemenu--htx span::before { 
 
    transition-property: top, transform; 
 
} 
 
.mobilemenu--htx span::after { 
 
    transition-property: bottom, transform; 
 
} 
 
/* active state, i.e. menu open */ 
 

 
.mobilemenu--htx.is-active { 
 
    background-color: none; 
 
} 
 
.mobilemenu--htx.is-active span { 
 
    background: none; 
 
} 
 
.mobilemenu--htx.is-active span::before { 
 
    top: 0; 
 
    transform: rotate(45deg); 
 
    background-color: #FFFFFF; 
 
} 
 
.mobilemenu--htx.is-active span::after { 
 
    bottom: 0; 
 
    transform: rotate(-45deg); 
 
    background-color: #FFFFFF; 
 
} 
 
.mobilemenu--htx.is-active span::before, 
 
.mobilemenu--htx.is-active span::after { 
 
    transition-delay: 0s, 0.3s; 
 
} 
 
.animate { 
 
    visibility: inherit; 
 
    transform: scale(2, 2) translateX(-100px); 
 
    animation-name: scalenav; 
 
    animation-duration: .50s; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease-in-out; 
 
    animation-direction: normal; 
 
    animation-fill-mode: forwards; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mobile-nav"> 
 
    <div class="mobile-link-container"> 
 
    <div class="mobile-links"> 
 
     <ul> 
 
     Nav Link 1, Nav link 2, Nav link 3 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button class="mobilemenu mobilemenu--htx"> 
 
    <span></span> 
 
</button>

是background-check.js適用於元素的兩個類是：

.background--light { 
    color: #000000 !important; 
    fill: #000000; 
} 

.background--dark { 
    color: #FFFFFF !important; 
    fill: #FFFFFF; 
} 

我試着在我的.mobilemenu元素上使用fill:，並嘗試了dding background-color分配給兩個'--light'和'--dark'類，但這隻會干擾我的網頁上的所有其他元素，我也正在使用它們，並且似乎也不會影響::before和::after菜單類

是否有另一個選項可以動態更改漢堡包顏色？

我打算重寫漢堡並擺脫僞造類，如果有幫助 - 唯一的規定是它必須是純粹的CSS，我想保留動畫。

Answer 1

添加!important改寫漢堡包，就像這樣：

.mobilemenu--htx.is-active { 
    background-color: red !important; 
} 
.mobilemenu--htx.is-active span::before { 
    top: 0; 
    transform: rotate(45deg); 
    background-color: red !important; 
} 
.mobilemenu--htx.is-active span::after { 
    bottom: 0; 
    transform: rotate(-45deg); 
    background-color: blue !important; 
} 

它可以改變漢堡包背景顏色。 https://jsfiddle.net/jp6gpdd7/