Bersyarat menukar className kepada modul css (React)
P粉799885311
P粉799885311 2023-08-17 18:10:17
0
1
487
<p>Saya cuba memainkan animasi apabila pengguna menuding pada bar navigasi tapak web saya. Saya cuba mencapai ini dengan menukar modul css berdasarkan sama ada tetikus melayang di atas bar navigasi. Saya cuba memikirkan mengapa kod ini tidak berfungsi. Sebarang bantuan amat dihargai! </p> <p>Navbar.jsx:</p> <pre class="brush:php;toolbar:false;">import React, { useState } daripada "react"; import { Pautan } daripada "react-router-dom"; import gaya daripada "../styles/Navbar.module.css"; const Navbar = () => const [className, setClassName] = useState("line-after"); kembali ( <div className="navbar" onMouseEnter={() => setClassName("line::before")} onMouseLeave={() => setClassName("line-after")} > <nav> <Pautkan ke="/about" className="home-page"> Bob <br /> Jones </Pautan> <ul> <li> <Pautan ke="/about" className="about-page"> Tentang </Pautan> </li> <li> <Pautan ke="/resume" className="resume-page"> Sambung semula </Pautan> </li> <li> <Pautan ke="/contact" className="contact-page"> Kenalan </Pautan> </li> </ul> </nav> <div className={styles.className}></div> </div> ); }; eksport Navbar lalai;</pre> <p>Modul css:</p> <pre class="brush:php;toolbar:false;">.line::before { kandungan: ""; jawatan: mutlak; atas: 0; kiri: 0; lebar: 55px; ketinggian: 1px; latar belakang: hitam; animasi-nama: bernyawa; tempoh animasi: 1s; } .line-after { jidar: 40px 40px 40px 40px; lebar: 55px; ketinggian: 1px; latar belakang: putih; kedudukan: relatif; } @keyframes menghidupkan { 0% { kiri: 0; } 100% { kiri: 100%; } }</pre> <p>Saya menukar keadaan className apabila tetikus keluar dan memasuki bar navigasi. Walau bagaimanapun, ia mengatakan bahawa className pembolehubah keadaan saya tidak pernah digunakan, jadi saya fikir itulah masalahnya. Tidak pasti bagaimana untuk membetulkannya. </p>
P粉799885311
P粉799885311

membalas semua(1)
P粉124890778

Anda boleh mencapai ini tanpa menggunakan logik React sama sekali, anda hanya boleh menggunakan animasi CSS (seperti yang sedang anda lakukan) dan kelas pseudo CSS (dalam kes ini :hover) dan bukannya menukar secara dinamik Kelas elemen.

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Sila semak jika ini sesuai untuk anda: Cara memainkan animasi pada tuding dan jeda pada tuding tidak aktif

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!