cari
Rumahhujung hadapan webtutorial cssBagaimana untuk Menyongsangkan Warna Teks pada Mouse Hover Menggunakan Clip-Path?

How to Invert Text Color on Mouse Hover Using Clip-Path?

Terbalikkan warna teks pada tuding tetikus

Soalan mengemukakan senario di mana pengguna ingin menyongsangkan warna teks hitam apabila melayang di atasnya menggunakan kursor hitam tersuai, seperti yang ditunjukkan dalam GIF yang disediakan. Walaupun pengguna telah cuba mencipta kesan ini menggunakan CSS dan JavaScript, mereka tidak berjaya, dengan kod tersebut hanya menjadikan kursor putih tetapi tidak menyongsangkan teks hitam.

Penyelesaian

Penyelesaian yang ditawarkan di sini menggunakan konsep laluan klip untuk mencapai kesan yang diingini. Ia melibatkan pendua teks untuk mencipta dua lapisan, satu dengan teks hitam dan satu lagi dengan teks putih. Dengan menggunakan laluan klip dan melaraskan kedudukannya berdasarkan pergerakan kursor, lapisan atas boleh didedahkan, menyongsangkan warna teks di bawahnya.

Kod berikut menunjukkan penyelesaian ini:

<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 id="WORK">WORK</h1>

<span class="cursor"></span></code>

Dalam kod ini, elemen h1 mengandungi teks hitam bersama dengan lapisan pendua di bawahnya dengan teks putih. Laluan klip pada lapisan atas dilaraskan berdasarkan kedudukan kursor, mendedahkan teks putih di bawahnya dan menyongsangkan warna teks hitam dengan berkesan.

Atas ialah kandungan terperinci Bagaimana untuk Menyongsangkan Warna Teks pada Mouse Hover Menggunakan Clip-Path?. 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
Dua gambar dan API: Segala yang kita perlukan untuk Recoloring ProductDua gambar dan API: Segala yang kita perlukan untuk Recoloring ProductApr 15, 2025 am 11:27 AM

Baru -baru ini saya dapati penyelesaian untuk mengemas kini warna mana -mana imej produk. Jadi dengan hanya satu produk, kita boleh mewarnakannya dengan cara yang berbeza untuk ditunjukkan

Berita Platform Mingguan: Kesan kod pihak ketiga, kandungan campuran pasif, negara dengan sambungan yang paling lambatBerita Platform Mingguan: Kesan kod pihak ketiga, kandungan campuran pasif, negara dengan sambungan yang paling lambatApr 15, 2025 am 11:19 AM

Pada minggu ini, Roundup, Lighthouse menyoroti cahaya pada skrip pihak ketiga, sumber yang tidak selamat akan disekat di tapak yang selamat, dan banyak kelajuan sambungan negara

Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiriPilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiriApr 15, 2025 am 11:09 AM

Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas

Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet ReactIa ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet ReactApr 15, 2025 am 11:01 AM

Ketua dokumen mungkin bukan bahagian paling glamor dari laman web, tetapi apa yang masuk ke dalamnya boleh dikatakan sama pentingnya dengan kejayaan laman web anda sebagai

Apa itu Super () dalam JavaScript?Apa itu Super () dalam JavaScript?Apr 15, 2025 am 10:59 AM

Apa yang berlaku apabila anda melihat beberapa JavaScript yang memanggil Super (). Dalam kelas kanak -kanak, anda menggunakan super () untuk memanggil pembina ibu bapa dan super. untuk mengaksesnya

Membandingkan pelbagai jenis popup JavaScript asliMembandingkan pelbagai jenis popup JavaScript asliApr 15, 2025 am 10:48 AM

JavaScript mempunyai pelbagai API popup terbina dalam yang memaparkan UI khas untuk interaksi pengguna. Terkenal:

Mengapa laman web yang boleh diakses begitu sukar untuk dibina?Mengapa laman web yang boleh diakses begitu sukar untuk dibina?Apr 15, 2025 am 10:45 AM

Saya sedang berbual dengan beberapa orang depan pada hari yang lain tentang mengapa begitu banyak syarikat berjuang untuk membuat laman web yang boleh diakses. Mengapa laman web yang boleh diakses begitu sukar

Atribut `tersembunyi` kelihatan lemahAtribut `tersembunyi` kelihatan lemahApr 15, 2025 am 10:43 AM

Terdapat atribut HTML yang betul -betul apa yang anda fikir harus dilakukan:

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod