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

マウス ホバーでテキストの色を反転

この GIF は望ましい効果を示しています:

[テキストが白くなる GIFマウスホバー]

CSS と JS を使用してこの効果を作成することができます。 1 つの方法では、複製されたテキスト レイヤーのクリップ パスを操作して、ホバー時に反転した色を表示します。

<code class="css">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%));
}</code>

<code class="js">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>

マウスが移動すると、スクリプトはクリップ パスを調整して、より多くの色を表示します。テキストを反転し、ホバー効果を作成します。

以上がCSSとJavaScriptを使用してマウスホバー時のテキストの色を反転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。