根据 BG 图像动态更改“汉堡”导航

Question

我正在寻找一种方法来动态更改“汉堡”导航元素的颜色，具体取决于它浮动在其顶部的图像的颜色。

我在我的文本元素上使用了 Kenneth Cache 简洁的“backgroundcheck.js”脚本。这通过删除图像的颜色然后应用一个类（分别为.background--light 或.background--dark）来工作，但它似乎不适用于我的汉堡包，可能有两个原因 -

• 我正在使用伪类（::before 和 ::after）
• 导航使用background-color，但我不能在我的.background-light 或background--dark 元素中使用它，因为它会填充我需要具有“不可见”背景的其他元素。

我的汉堡包如下 -

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

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

.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:，还尝试将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/