如何使用 CSS 和 JavaScript 建立滑鼠懸停時的反轉文字顏色效果？

反轉滑鼠懸停時的文字顏色

目標是用黑色遊標停留在文字元素上時反轉文字元素的顏色。效果應類似以下GIF：

[示範效果的GIF]

要使用CSS 和JavaScript 來實現此效果，我們將結合多種技術：

1. 建立複製文字圖層：複製文字元素並將其直接放置在原始元素的頂部。將重複文字圖層的顏色反轉為白色。
2. 使用剪輯路徑顯示頂層：使用剪輯路徑定義一個圓形區域，該區域將顯示反轉的文字圖層.
3. 監聽滑鼠移動：當使用者將遊標移到文字上時，調整剪輯路徑的位置以符合遊標的移動。

這裡是範例實作：

<code class="javascript">var h = document.querySelector('h1');
var p = h.getBoundingClientRect();
var c = document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  // Adjust the cursor position
  c.style.left = e.clientX + 'px';
  c.style.top = e.clientY + 'px';

  // Adjust the clip-path
  h.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h.style.setProperty('--y', (e.clientY - p.left) + 'px');
};</code>

<code class="css">body {
  cursor: none;
}

h1 {
  color: #000;
  display: inline-block;
  margin: 50px;
  text-align: center;
  position: relative;
}

h1:before {
  position: absolute;
  content: attr(data-text);
  color: #fff;
  background: #000;
  clip-path: circle(20px at var(--x, -100%) var(--y, -100%));
}

.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: -2;
}</code>

<code class="html"><h1 data-text="WORK">WORK</h1>

<span class="cursor"></span></code>

透過結合這些技術，我們可以在滑鼠懸停時創造所需的文字顏色反轉效果。

以上是如何使用 CSS 和 JavaScript 建立滑鼠懸停時的反轉文字顏色效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！