jquery menyedari penunjuk tetikus menukar warna

Dengan perkembangan teknologi Internet yang berterusan, orang ramai mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk halaman web. Dalam proses reka bentuk web, menukar warna apabila tetikus dihalakan adalah kesan biasa, yang boleh menambah beberapa interaktiviti pada halaman dan menjadikan pengalaman pengguna lebih kaya.

jQuery ialah perpustakaan JavaScript popular yang mudah digunakan dan mempunyai keserasian merentas pelayar yang baik. Melalui pustaka jQuery, kita boleh mencapai kesan perubahan warna pada penunjuk tetikus dengan mudah, dengan itu meningkatkan keindahan dan interaktiviti halaman web.

Di bawah, saya akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mencapai kesan perubahan warna penunjuk tetikus:

Langkah 1: Perkenalkan perpustakaan jQuery

Sebelum menyedari kesan perubahan warna daripada menunjuk tetikus, kita perlu memperkenalkan perpustakaan jQuery. Pustaka jQuery boleh diperkenalkan dalam halaman dengan kod berikut:

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

Di sini, kami menggunakan jQuery versi 3.4.1 yang digunakan oleh banyak laman web yang besar. Dengan memperkenalkan perpustakaan jQuery, kami boleh menggunakan banyak kaedah mudah dan praktikal yang disediakan olehnya.

Langkah 2: Tulis gaya CSS

Sebelum menggunakan jQuery untuk mencapai kesan perubahan warna penunjuk tetikus, kita perlu terlebih dahulu menulis gaya CSS yang perlu diubah apabila tetikus menunjuk. Perubahan warna apabila tetikus dihalakan boleh ditakrifkan melalui kod berikut:

.hover-color {
  color: #ff0000;
}

Di sini, kami menggunakan warna sifat CSS untuk menentukan warna teks, menetapkannya kepada merah. Kami memberikannya nama kelas .hover-color supaya ia boleh digunakan pada elemen yang sepadan apabila tetikus dihalakan kepadanya.

Langkah 3: Gunakan jQuery untuk mencapai kesan perubahan warna penunjuk tetikus

Langkah teras untuk mencapai kesan perubahan warna penunjuk tetikus ialah menggunakan acara tetikus jQuery untuk menambah dan memadam dengan sewajarnya apabila tetikus bergerak masuk dan keluar. nama kelas CSS. hover-color. Berikut ialah kod pelaksanaan:

$(document).ready(function() {
  $("p").mouseenter(function() {
    $(this).addClass("hover-color");
  });
  $("p").mouseleave(function() {
    $(this).removeClass("hover-color");
  });
});

Di sini, kami menggunakan acara kesediaan dokumen jQuery $(document).ready() untuk memastikan kod yang sepadan dilaksanakan selepas halaman dimuatkan.

Seterusnya, kami menggunakan acara tetikus jQuery yang masuk tetikus dan meninggalkan tetikus untuk sepadan dengan operasi apabila tetikus bergerak masuk dan keluar masing-masing. Apabila tetikus bergerak masuk, kami menggunakan kata kunci $(this) untuk mewakili elemen yang ditunjuk pada masa ini dan menggunakan kaedah .addClass() untuk menambah nama kelas CSS .hover-color padanya, menjadikannya kelihatan merah. Apabila tetikus bergerak keluar, kami menggunakan kaedah .removeClass() untuk mengalih keluar nama kelas daripada elemen yang ditunjuk pada masa ini untuk memulihkan warna asalnya.

Pada ketika ini, kami telah berjaya menggunakan jQuery untuk mencapai kesan perubahan warna penunjuk tetikus. Ia boleh digunakan pada tag yang dikehendaki dengan menggantikan elemen p dengan elemen lain. Kaedah ini mudah dan praktikal, serta boleh membantu kami meningkatkan interaktiviti dan kesan visual halaman web dengan cepat.

Ringkasan:

Artikel ini memperkenalkan langkah-langkah untuk menggunakan jQuery untuk mencapai kesan perubahan warna pada penunjuk tetikus. Menggunakan jQuery boleh mencapai kesan ini dengan lebih mudah dan cepat, meningkatkan keindahan dan interaktiviti halaman web. Saya percaya melalui penjelasan dalam artikel ini, pembaca mempunyai pemahaman dan penguasaan tertentu tentang teknologi ini dan boleh mengaplikasikannya secara fleksibel dalam pembangunan sebenar.

Atas ialah kandungan terperinci jquery menyedari penunjuk tetikus menukar warna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!