Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menyongsangkan Warna Teks pada Mouse Hover dengan CSS dan JavaScript?

Bagaimana untuk Menyongsangkan Warna Teks pada Mouse Hover dengan CSS dan JavaScript?

Susan Sarandon
Susan Sarandonasal
2024-10-30 01:29:02469semak imbas

How to Invert Text Color on Mouse Hover with CSS and JavaScript?

Terbalikkan Warna Teks pada Tuding Tetikus

GIF ini menunjukkan kesan yang diingini:

[GIF teks bertukar menjadi putih hover tetikus]

Ada kemungkinan untuk mencipta kesan ini menggunakan CSS dan JS. Satu kaedah melibatkan memanipulasi laluan klip lapisan teks pendua untuk mendedahkan warna terbalik pada tuding.

<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>

Apabila tetikus bergerak, skrip melaraskan laluan klip untuk mendedahkan lebih banyak teks terbalik, mencipta kesan tuding.

Atas ialah kandungan terperinci Bagaimana untuk Menyongsangkan Warna Teks pada Mouse Hover dengan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn