マウスホバー時にテキストの色を反転
目的は、黒いカーソルをテキスト要素の上に置いたときに、テキスト要素の色を反転することです。効果は次の GIF のようになります:
[効果を示す GIF]
CSS と JavaScript でこの効果を実現するには、次の手法を組み合わせて使用します:
は次のとおりです。実装例:
<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 サイトの他の関連記事を参照してください。