Как сделать инверсию цвета текста фиксированного меню, когда оно проходит над темным блоком?

Question

[Андрей]

Есть фиксированное справа меню (сайдбар), которое просто ездит над блоками. Нужно менять цвет на белый при прохождении над темным цветом. Пробовал с mix-blend-mode, не получилось. При этом, как можно увидеть, link:after (подчеркивание) цвет почему-то инвертирует.

Comments

[Олег]

Как у вас реализовано меню? Код скиньnе на jsfiddle.net

[Андрей]

Олег, https://codepen.io/legeidaa/pen/XWjmqQx - это как у меняя сейчас
Если добавить mix-blend-mode на сам .aside-menu, а у линка убрать цвет текста, то цвета инвертируются несколько в желтый и синий

[Андрей]

Олег, цвета менялись на желтый и синий из-за того, что цвет ссылок изначально у них фиолетовый и color к ссылкам не применяется. Поставил mix-blend-mode: difference и color: white к блоку-обертке и color: black к ссылками и все заработало как надо.
Также в section надо жестко установить белый цвет фона, несмотря на то, что он изначально всегда белый

Answer 1

[0xD34F]

Пробовал с mix-blend-mode, не получилось.

Пробовал с mix-blend-mode, получилось.

Comments

[mickeybroud]

ссылка не доступна, через vpn тоже. Можешь сюда код скинуть, пожалуйста?

[0xD34F]

mickeybroud,

<ul class="menu">
  <li>hello, world!!</li>
  <li>fuck the world</li>
  <li>fuck everything</li>
</ul>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

section {
  height: 400px;
}

section:nth-child(odd) { background: white; }
section:nth-child(even) { background: black; }

.menu {
  position: fixed;
  font: bold 48px monospace;
  text-decoration: underline;
  color: white;
  mix-blend-mode: difference;
}