Bagaimanakah JavaScript Boleh Mengubah Sifat CSS Secara Dinamik untuk Mengawal Keterlihatan Elemen pada Hover?-tutorial css-php.cn

Bagaimanakah JavaScript Boleh Mengubah Sifat CSS Secara Dinamik untuk Mengawal Keterlihatan Elemen pada Hover?

Barbara Streisand

Lepaskan： 2024-12-23 15:44:13

asal

607 orang telah melayarinya

How Can JavaScript Dynamically Alter CSS Properties to Control Element Visibility on Hover?

Mengubah Sifat CSS dengan JavaScript

Meningkatkan antara muka pengguna dengan melaraskan sifat CSS secara dinamik dengan JavaScript ialah keperluan biasa dalam pembangunan web. Untuk menggambarkan ini, mari kita periksa senario tertentu di mana melayang di atas

elemen harus mencetuskan keterlihatan

yang lain.

Pelaksanaan:

Untuk mencapai kesan ini, sifat gaya elemen sasaran boleh dimanipulasi. Pertimbangkan penanda berikut:

<div class="left">Hello1</div>
<div class="center">
  <div class="left1">Bye1</div>
  <div class="right1">Bye2</div>
</div>
<div class="right">Hello2</div>

Salin selepas log masuk

Secara lalai, elemen kiri1 dan kanan1 disembunyikan menggunakan paparan: tiada. Untuk menjadikannya kelihatan semasa tuding, pendengar acara JavaScript boleh dilampirkan pada bekas kiri dan kanan:

// Handle hover event for the left container
document.querySelector(".left").addEventListener("mouseover", function() {
  document.querySelector(".left1").style.display = "block";
});

// Handle hover event for the right container
document.querySelector(".right").addEventListener("mouseover", function() {
  document.querySelector(".right1").style.display = "block";
});

Salin selepas log masuk

Skrip ini menetapkan sifat paparan elemen tersembunyi untuk "sekat" apabila acara tuding yang sepadan ialah dicetuskan, menjadikannya kelihatan.

Tambahan Pertimbangan:

Untuk keserasian merentas penyemak imbas, anda mungkin perlu mengendalikan awalan vendor (cth., -webkit-border, -moz-border).
Menggunakan kelas boleh menjadi cara yang lebih cekap untuk menggayakan elemen dan mengurus keadaannya.
Pertimbangkan pengoptimuman prestasi, seperti hanya menyasarkan elemen yang diperlukan semasa menetapkan gaya.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Mengubah Sifat CSS Secara Dinamik untuk Mengawal Keterlihatan Elemen pada Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Mengapa Z-Index Tidak Berfungsi Seperti Yang Dijangkakan dengan Kedudukan Tetap? Artikel seterusnya：Bagaimanakah Saya Boleh Mengehadkan Skop Fail CSS Luaran kepada Elemen Tertentu?

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2279

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2414

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2028

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...