javascript - 根据BG图片动态改变 'hamburger' nav

Question

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

我正在使用 Kenneth Cache 的整洁 ' backgroundcheck.js ' 我的文本元素上的脚本。这通过删除图像的颜色然后应用一个类(分别为 .background--light 或 .background--dark )来工作，但它似乎没有在我的汉堡包上工作可能有两个原因-

• 我正在使用伪类(::before 和 ::after)
• 导航使用 background-color 但我不能在我的 .background-light 或 background--dark 元素中使用它作为然后它会填充我需要具有“隐形”BG 的其他元素。

我的汉堡是这样设置的-

$(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/