将鼠标悬停在导航栏中的链接上时，请关闭混合混合模式

Question

当我将鼠标悬停在导航栏中的链接上时，我正在尝试关闭mix-blend-mode：difference效果。

我尝试了各种属性值，但均未成功。

@media screen and (min-width: 780px) {
  .header {
    mix-blend-mode: difference;
  }
  .header li {
    float: left;
    margin-top: -5px;
  }
  .header li a {
    height: 61px;
    display: block;
    padding: 20px 20px;
    text-decoration: none;
  }
  .header li a:hover,
  .header .menu-btn:hover {
    background-color: @color5;
    mix-blend-mode: normal;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: @color3-b;
    border: 0;
  }
}

<header class="header">
  <a href=''>
    <img id="nav-logo" src='images/TU.png' alt="footer company image">
  </a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#about">About T/U</a></li>
    <li><a href="#artists">Artists</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="#location">Location</a></li>
    <li><a href="#footer">Social Media</a></li>
  </ul>
</header>

我希望导航栏中的链接在悬停时不会受到影响。 预期： expected result

结果： mix-blend-mode: difference despite being set to "normal" on hover