Bagaimana untuk mengubahsuai warna hover elemen HTML secara dinamik dengan mengklik butang?

Menggunakan pembolehubah CSS dan JavaScript untuk mengubahsuai warna hover unsur secara dinamik

Artikel ini memperkenalkan bagaimana untuk mengubah warna hover elemen HTML secara dinamik dengan mengklik butang untuk meningkatkan pengalaman interaktif web. Kami akan menggunakan pembolehubah CSS dan JavaScript untuk melaksanakan fungsi ini.

Matlamatnya ialah: Klik butang untuk mengubah suai gaya hover elemen sedia ada. Untuk melakukan ini, kami akan menggunakan pembolehubah CSS untuk menentukan warna hover dan mengubah suai nilai pembolehubah CSS dalam acara klik butang melalui JavaScript.

Rancangan Pelaksanaan:

Pertama, struktur HTML mengandungi elemen sasaran ( .element ) dan pelbagai butang ( .change-color ), setiap butang sepadan dengan warna hover:

<div class="container">
  <div class="element"></div>
  <button class="change-color">Merah</button>
  <button class="change-color">Hijau</button>
  <button class="change-color">Biru</button>
</div>

Gaya CSS mentakrifkan gaya asas elemen dan menggunakan pembolehubah CSS --color untuk mengawal warna hover, merah lalai:

 .element {
  lebar: 100px;
  Ketinggian: 100px; /* nisbah aspek tidak serasi dengan semua pelayar, ditukar kepada ketinggian tetap*/
  Margin: 20px;
  latar belakang warna: Lightgray; /* Tambahkan warna latar untuk memudahkan memerhatikan kesan*/
}

.element: hover {
  latar belakang: var (-warna, merah);
}

Akhirnya, kod JavaScript mendengar untuk setiap acara klik butang. Selepas mengklik butang, dapatkan kandungan teks butang (nama warna) dan berikan nilai warna kepada pembolehubah CSS --color menggunakan kaedah el.style.setProperty() :

 const el = document.QuerySelector ("elemen");

document.QuerySelectorAll (". Change-color"). Foreach (e => {
  e.addeventListener ("klik", () => {
    el.style.setProperty ("-warna", e.textContent);
  });
});

Melalui kerja kolaboratif HTML, CSS dan JavaScript, anda dapat merealisasikan fungsi secara dinamik mengubah warna elemen HTML dengan mengklik butang. Kaedah ini mudah, cekap dan mudah dijaga.

Atas ialah kandungan terperinci Bagaimana untuk mengubahsuai warna hover elemen HTML secara dinamik dengan mengklik butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!