React JS: “⭐️Совет по CSS!⭐️ Для создания инвертированного эффекта :hover вы може…”

⭐️Совет по CSS!⭐️

Для создания инвертированного эффекта :hover вы можете использовать режим mix-blend-mode с настраиваемыми свойствами :hover.

button > span {
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  mix-blend-mode: difference; 
}

Классная фишка в том, что использование режима mix-blend-mode действует как инвертор цвета, что хорошо работает с монохромными элементами управления.

Что касается того, как переместить этот код в JavaScript?

const UPDATE = ({target, x, y }) => {
  const bounds = target.getBoundingClientRect()
  target .style.setProperty('--x', x - bounds.left)
  target .style.setProperty('--y', y - bounds .top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))

button:is(:hover, :focus-visible) {
  --active: 1;
}
button span {
  transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
  transition: transform 0.25s;

}

@react_tg