Отключите режим смешивания при наведении на ссылки в навигационной панели - PullRequest
Новая
       39

Отключите режим смешивания при наведении на ссылки в навигационной панели

0 голосов
/ 03 июля 2019

Я пытаюсь отключить смешанный режим смешивания: эффект разницы при наведении курсора на ссылку в навигационной панели.

Я пробовал различные значения свойств, но безуспешно. 

@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>

Я ожидал, что ссылки в панели навигации не будут затронуты при наведении курсора. ОЖИДАЕТСЯ: ожидаемый результат

РЕЗУЛЬТАТ: mix-blend-mode: разница, несмотря на то, что при наведении на нее установлен "normal"

...