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