Bagaimanakah JavaScript Boleh Mengubah Sifat CSS Secara Dinamik untuk Mencipta Kesan Tuding pada Elemen Bersarang?

Memahami Sifat CSS Mengubah Secara Dinamik dengan JavaScript

Dengan kemunculan pembangunan web moden, selalunya perlu mengubah suai persembahan visual elemen secara dinamik sebagai tindak balas kepada interaksi pengguna atau keadaan tertentu. JavaScript menawarkan penyelesaian yang berkuasa untuk mencapai perkara ini dengan memanipulasi sifat CSS secara pengaturcaraan.

Objektif: Melaksanakan Kesan Hover pada Elemen Bersarang

Dalam senario yang anda sediakan, anda berhasrat untuk mendedahkan tersembunyi

elemen apabila

sedang berlegar. Untuk mencapainya, kami akan mendalami aplikasi praktikal JavaScript untuk mengubah suai sifat CSS.

Langkah 1: Fahami Sifat Gaya

Kunci untuk mengubah sifat CSS menggunakan JavaScript terletak pada sifat gaya. Ia menyediakan akses terus kepada penggayaan sebaris elemen, membolehkan anda memanipulasi pelbagai atribut, termasuk jidar, warna dan tetapan paparan.

Langkah 2: Memanipulasi Gaya Sempadan

Untuk menukar sempadan elemen apabila ia dilegar, anda boleh menggunakan yang berikut sintaks:

document.getElementById("elementId").style.border = "3px solid #FF0000";

Kod ini menetapkan sempadan elemen dengan ID yang ditentukan kepada sempadan merah pepejal selebar 3 piksel.

Langkah 3: Mengubah Suai Tetapan Paparan

Dalam kes anda, anda ingin membuat

muncul apabila peristiwa hover berlaku. Untuk mencapai matlamat ini, anda boleh menggunakan sifat paparan:

document.getElementById("hiddenElementId").style.display = "block";

Kod ini menetapkan sifat paparan elemen tersembunyi kepada "sekat", menjadikannya kelihatan.

Langkah 4 : Menggabungkan Semuanya

Untuk melaksanakan kesan tuding pada elemen bersarang anda, anda boleh menggunakan yang berikut skrip:

var left1 = document.querySelector(".left1");
var right1 = document.querySelector(".right1");

var leftElement = document.querySelector(".left");
leftElement.addEventListener("mouseover", function() {
  left1.style.display = "block";
});

leftElement.addEventListener("mouseout", function() {
  left1.style.display = "none";
});

var rightElement = document.querySelector(".right");
rightElement.addEventListener("mouseover", function() {
  right1.style.display = "block";
});

rightElement.addEventListener("mouseout", function() {
  right1.style.display = "none";
});

Skrip ini mengubah suai sifat paparan elemen tersembunyi untuk menjadikannya kelihatan apabila elemen kelihatan yang sepadan diletakkan di atasnya.

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