クリップパスを使用してマウスホバー時のテキストの色を反転するにはどうすればよいですか?

マウスホバー時にテキストの色を反転する

この質問は、ユーザーがマウスをホバーしたときに黒いテキストの色を反転したいというシナリオを示しています。提供された GIF に示されているように、カスタムの黒いカーソルを使用します。ユーザーは CSS と JavaScript を使用してこの効果を作成しようとしましたが、コードはカーソルを白にするだけで黒のテキストを反転せず、失敗しました。

解決策

ここで提供するソリューションでは、クリップパスの概念を採用して目的の効果を実現します。テキストを複製して 2 つのレイヤーを作成し、1 つは黒いテキスト、もう 1 つは白いテキストを作成します。クリップパスを使用し、カーソルの動きに基づいて位置を調整すると、最上位のレイヤーが表示され、その下のテキストの色が反転します。

次のコードは、この解決策を示しています。

<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 中国語 Web サイトの他の関連記事を参照してください。