Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Kesan Warna Teks Terbalik pada Mouse Hover Menggunakan CSS dan JavaScript?

Bagaimana untuk Mencipta Kesan Warna Teks Terbalik pada Mouse Hover Menggunakan CSS dan JavaScript?

Patricia Arquette
Patricia Arquetteasal
2024-10-30 04:14:28176semak imbas

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

Terbalikkan Warna Teks pada Tuding Tetikus

Kesan ini melibatkan penyongsangan warna teks hitam apabila kursor hitam tersuai melayang di atasnya. Begini cara ia boleh dicapai menggunakan CSS dan JavaScript:

Salin teks untuk mencipta dua lapisan, satu di atas yang lain dengan warna teks yang bertentangan. Satu lapisan akan berfungsi sebagai latar belakang, manakala satu lagi akan digunakan untuk warna terbalik.

Letakkan dua lapisan teks tepat di atas satu sama lain menggunakan kedudukan CSS: mutlak.

Gunakan klip -laluan pada lapisan warna terbalik untuk mendedahkan bahagian teks yang dikehendaki. Nilai laluan klip berubah secara dinamik berdasarkan kedudukan tetikus.

Laksanakan pendengar acara JavaScript untuk menjejaki pergerakan tetikus. Semasa kursor bergerak, hitung offset antara kedudukan kursor dan elemen teks.

Kemas kini nilai laluan klip menggunakan ofset yang dikira untuk mendedahkan warna terbalik dalam kawasan yang dikehendaki.

Oleh melaraskan laluan klip berdasarkan pergerakan tetikus, kesan warna terbalik dicapai. Perlu diingat bahawa warna kursor juga mesti ditetapkan kepada hitam.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Warna Teks Terbalik pada Mouse Hover Menggunakan 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