hujung hadapan web
tutorial js
Bagaimana untuk mengubahsuai warna hover elemen HTML secara dinamik dengan mengklik butang?
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!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana untuk mendaftar di Exchange Ouyi? Proses Pendaftaran Exchange Ouyi 2025
Aug 22, 2025 pm 07:33 PM
OKX adalah platform perdagangan aset digital yang terkenal di dunia, menyediakan pengguna dengan perkhidmatan perdagangan aset digital yang selamat, stabil dan boleh dipercayai, dan menyokong pelbagai aset digital arus perdana dan baru muncul. Pertama, muat turun aplikasi OUYI melalui pautan rasmi, klik butang muat turun untuk mendapatkan pakej pemasangan, biarkan kebenaran yang diperlukan semasa pemasangan dan terus memasang, buka aplikasi untuk mendaftarkan akaun, gunakan nombor telefon bimbit atau alamat e -mel anda untuk menetapkan kata laluan dan lengkap pengesahan, dan akhirnya melakukan pengesahan identiti untuk memastikan keselamatan akaun.
Ikon dulang sistem komputer tidak kemas, bagaimana mengaturnya?
Aug 21, 2025 pm 08:12 PM
Menyembunyikan ikon dulang sistem tanpa menjejaskan operasi program, hanya menghilangkan paparan visual; 2. Benar-benar membersihkan dan melumpuhkan item permulaan yang tidak penting melalui pengurus tugas; 3. Selesaikan kekacauan dan nyahpasang perisian dan buat kebiasaan membatalkan penggabungan dan semak semasa pemasangan, untuk mencapai matlamat ganda visual yang menyegarkan dan pengoptimuman sumber.
Mempunyai token WLFI di bursa
Aug 21, 2025 am 09:18 AM
Token WLFI belum disahkan dilancarkan di bursa berpusat arus perdana. Pelabur perlu mengesahkan status penyenaraian mereka melalui saluran rasmi atau platform seperti CoinMarketCap dan Coingecko. Sekiranya mereka tidak dilancarkan, mereka hanya boleh berdagang di bursa yang terdesentralisasi (DEX) seperti UniSwap dan Pancakeswap. Pengguna boleh menyambung ke DEX melalui storan Web3 seperti metamask dan masukkan alamat kontrak yang diperoleh oleh pegawai untuk berdagang. Perhatikan toleransi slip dan risiko keselamatan semasa beroperasi; Sama ada WLFI boleh dilancarkan pada pertukaran berpusat pada masa akan datang bergantung kepada faktor -faktor seperti asas projek, aktiviti komuniti, kecairan dan pematuhan. Pihak projek perlu aktif berhubung dengan pertukaran dan memenuhi keperluan semakan, sementara Binance, OKX, Huobi
Cara Membuat Kesan Glassmorfisme Dengan CSS
Aug 22, 2025 am 07:54 AM
Untuk membuat kesan meniru kaca CSS, anda perlu menggunakan penapis latar belakang untuk mencapai latar belakang kabur, menetapkan latar belakang lut seperti RGBA (255,255,255,0.1), tambah sempadan halus dan bayang-bayang untuk meningkatkan rasa hierarki, dan pastikan terdapat kandungan visual yang cukup di belakang unsur-unsur; 1. Gunakan penapis latar belakang: blur (10px) untuk mengaburkan kandungan latar belakang; 2. Gunakan RGBA atau HSLA untuk menentukan latar belakang telus untuk mengawal tahap ketelusan; 3. Tambah 1PxSolidrgba (255,255,255,0.3) sempadan dan bayang-bayang kotak untuk meningkatkan tiga dimensi; 4. Pastikan bekas mempunyai latar belakang yang kaya seperti gambar atau tekstur untuk membentangkan kesan penembusan kabur; 5. Ia serasi dengan pelayar lama
Duit syiling mana yang membuat akaun teratas dalam bulatan mata wang memberi perhatian pada bulan Ogos?
Aug 21, 2025 am 09:12 AM
Defai, Defi dan Desci menjadi tiga naratif arus perdana pasaran crypto pada bulan Ogos. Token seperti Grift, Link, dan Uro mendapat perhatian Kol. Defai naik 45%, Desci naik 78%, ARB, APT, dan TAO yang lama di pasaran sebenar untuk membuat keuntungan. Magacoin, XRP, dan Pepe popular di kalangan masyarakat, dan sentimen pasaran positif tetapi risiko kekal.
Cara Menggunakan GRID-Template-areas di CSS
Aug 22, 2025 am 07:56 AM
Thegrid-template-areaspropertyallowsdeveloperstercreateintuitive, readableLelayoutsbydefiningnamedgridareas; eachstringRepresentowandeachwordacolumncell, withgrid-areanamesonchildelementsmatchingthoseIntHetHetPlate, sedemikian "headerheaderererheaderererheadererheadererheadererheadererheadererheadererheadererheadererheadererheaderheaderheadererheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader."
Cara Melaksanakan Tema Mod Gelap dengan CSS
Aug 22, 2025 am 09:55 AM
Terdapat dua cara utama untuk melaksanakan Mod Gelap: Satu adalah dengan menggunakan media yang lebih suka warna-skema untuk menanyakan secara automatik untuk menyesuaikan keutamaan sistem, dan yang lain adalah untuk menambah fungsi pensuisan manual melalui JavaScript. 1. Gunakan lebih suka skema-skema untuk menggunakan tema gelap secara automatik mengikut sistem pengguna. Tidak ada keperluan untuk JavaScript, hanya menentukan gaya dalam pertanyaan media; 2. 3. Anda boleh menggabungkan kedua -duanya untuk membaca Localst Pertama apabila halaman dimuatkan.
Cara gaya yang diperintahkan dan tidak teratur dengan CSS
Aug 22, 2025 am 07:59 AM
CssallowsfullcustomizationoforderedandunorderedliststoenhancereAdabilityanddesignconsistency.youcanchangedefaultmarkingsusingthelist-style-typeproperty, suchassettingunorderedliststousesquare, circle, ornobullets, ornobullets
