Bagaimana untuk Menyongsangkan Warna Teks pada Mouse Hover dengan CSS dan 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!