使用CSS 和JavaScript 反轉滑鼠懸停時的文字顏色

實現所需的懸停效果，其中黑色文字反轉為白色，同時保持出現黑色遊標時，我們可以將CSS 剪輯路徑的功能與JavaScript 事件處理結合。

此方法包括建立兩層文字：主文本層和反轉的文字層。倒置文字圖層位於主文字圖層後面，並將其文字顏色設為白色。

使用 JavaScript，我們捕捉滑鼠移動並動態調整倒置文字圖層的剪輯路徑。當滑鼠移動時，剪輯路徑會進行調整以顯示更多反轉的文本，從而產生主文本反轉其顏色的錯覺。

以下是關鍵程式碼元件的細分：

/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX   'px';
  cursor.style.top = e.clientY   'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top)   'px');
  h1.style.setProperty('--y', (e.clientY - p.left)   'px');
};

範例程式碼：

WORK

結果：

當您將滑鼠懸停在「WORK」文字上時，黑色文字將逐漸過渡為白色隨著滑鼠遊標的移動。