如何使用剪輯路徑反轉滑鼠懸停時的文字顏色？

滑鼠懸停時反轉文字顏色

該問題提出了一個場景，當使用者希望將滑鼠懸停在黑色文字上時反轉黑色文字的顏色使用自訂黑色遊標，如提供的GIF 所示。雖然用戶嘗試使用 CSS 和 JavaScript 創建此效果，但沒有成功，程式碼僅將遊標變成白色，但沒有反轉黑色文字。

解

這裡提供的解決方案採用了剪切路徑的概念來達到預期的效果。它涉及複製文字以創建兩層，一層包含黑色文本，另一層包含白色文字。透過使用 Clip-path 並根據遊標的移動調整其位置，可以顯示頂層，反轉其下方文字的顏色。

以下程式碼示範了此解決方案：

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

在此程式碼中，h1 元素包含黑色文字及其下方帶有白色文字的重複圖層。頂層的剪輯路徑根據遊標的位置進行調整，顯示下面的白色文字並有效反轉黑色文字的顏色。

以上是如何使用剪輯路徑反轉滑鼠懸停時的文字顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！