使用CSS 和JavaScript 反轉滑鼠懸停時的文字顏色
為了實現所需的懸停效果，其中黑色文字反轉為白色，同時保持黑色遊標的外觀，我們可以將CSS 剪輯路徑的功能與JavaScript 事件處理結合。
此方法包括建立兩層文字：主文本圖層和反轉文字圖層。倒置文字圖層位於主文字圖層後面，並將其文字顏色設為白色。
使用 JavaScript，我們捕捉滑鼠移動並動態調整倒置文字圖層的剪輯路徑。當滑鼠移動時，剪輯路徑會進行調整以顯示更多反轉的文本，從而產生主要文本反轉其顏色的錯覺。
以下是關鍵程式碼元件的細分：
<code class="css">/* 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;
}</code><code class="javascript">// 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');
};</code>範例程式碼：
<code class="html"><h1 data-text="WORK">WORK</h1> <span class="cursor"></span></code>
結果：
當您將滑鼠停留在「WORK」文字上時，隨著滑鼠遊標的移動，黑色文字會逐漸變成白色。
以上是如何使用 CSS 剪輯路徑和 JavaScript 實現反轉文字顏色懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
