ホームページ  >  記事  >  ウェブフロントエンド  >  CSS と JavaScript を使用して、マウス ホバー時に反転したテキストの色の効果を作成する方法

CSS と JavaScript を使用して、マウス ホバー時に反転したテキストの色の効果を作成する方法

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-30 04:14:28176ブラウズ

How to Create an Inverted Text Color Effect on Mouse Hover Using CSS and JavaScript?

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

この効果には、カスタムの黒のカーソルをその上に置くと、黒のテキストの色が反転します。 CSS と JavaScript を使用してこれを実現する方法は次のとおりです。

テキストを複製して、テキストの色が反対の上下に 2 つのレイヤーを作成します。 1 つのレイヤーは背景として機能し、もう 1 つは反転した色として使用されます。

CSS の位​​置: 絶対を使用して、2 つのテキスト レイヤーを正確に重ねて配置します。

クリップを使用します。 - 反転したカラーレイヤー上のパスを使用して、テキストの目的の部分を表示します。クリップパスの値は、マウスの位置に基づいて動的に変化します。

マウスの動きを追跡するための JavaScript イベント リスナーを実装します。カーソルが移動すると、カーソル位置とテキスト要素の間のオフセットが計算されます。

計算されたオフセットを使用してクリップパスの値を更新し、目的の領域で反転した色を表示します。

マウスの動きに基づいてクリップパスを調整すると、反転色の効果が得られます。カーソルの色も黒に設定する必要があることに注意してください。

以上がCSS と JavaScript を使用して、マウス ホバー時に反転したテキストの色の効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。