Peranan hover dalam html
Peranan hover dalam HTML dan contoh kod khusus
Dalam pembangunan web, hover merujuk kepada mencetuskan beberapa tindakan atau kesan apabila pengguna menuding kursor pada elemen. Ia dilaksanakan melalui CSS :hover pseudo-class. Dalam artikel ini, kami akan memperkenalkan peranan hover dan contoh kod khusus.
Pertama, tuding membolehkan elemen menukar gayanya apabila pengguna menudingnya. Sebagai contoh, apabila menuding tetikus pada butang, warna latar belakang butang atau warna teks boleh ditukar untuk mengingatkan pengguna tentang butang yang dipilih pada masa ini. Berikut ialah contoh kod mudah:
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: blue;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: red;
}
</style>
</head>
<body>
<button class="btn">按钮</button>
</body>
</html>Dalam kod di atas, warna latar belakang awal butang adalah biru, dan apabila tetikus melayang di atas butang, warna latar belakang butang berubah kepada merah.
Kedua, hover juga boleh digunakan untuk mencipta kesan interaktif. Contohnya, apabila tetikus melayang di atas imej, kesan pembesaran boleh dipaparkan, atau pada menu navigasi, apabila tetikus melayang di atas pilihan, menu kedua boleh dipaparkan. Berikut ialah contoh kod yang menggunakan tuding untuk mencipta kesan pembesaran gambar:
<!DOCTYPE html>
<html>
<head>
<style>
.image {
width: 200px;
height: 200px;
overflow: hidden;
}
.image img {
width: 100%;
height: 100%;
transition: transform 0.3s ease-in-out;
}
.image:hover img {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="image">
<img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="图片">
</div>
</body>
</html>Dalam kod di atas, apabila tetikus melayang di atas gambar, atribut skala gambar ditetapkan kepada 1.2, iaitu gambar dibesarkan 1.2 kali, dengan itu mencapai kesan pembesaran gambar.
Akhir sekali, tuding juga boleh digunakan untuk mengawal paparan dan menyembunyikan elemen. Contohnya, dalam senarai, apabila tetikus melayang di atas item senarai, kandungan terperinci item senarai dipaparkan. Berikut ialah contoh kod yang menggunakan tuding untuk mengawal paparan dan penyembunyian unsur:
<!DOCTYPE html>
<html>
<head>
<style>
.list-item {
display: none;
}
.list:hover .list-item {
display: block;
}
</style>
</head>
<body>
<ul class="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li class="list-item">列表项1的详细内容</li>
<li class="list-item">列表项2的详细内容</li>
<li class="list-item">列表项3的详细内容</li>
</ul>
</body>
</html>Dalam kod di atas, apabila tetikus melayang di atas item senarai, kandungan terperinci item senarai dipaparkan melalui :hover pseudo- pemilih kelas.
Ringkasnya, tuding memainkan peranan penting dalam pembangunan web. Ia boleh mengubah gaya elemen, mencipta kesan interaktif dan mengawal paparan dan penyembunyian unsur. Dengan menggunakan tuding dengan betul, anda boleh menambah lebih banyak interaktiviti dan menarik pada halaman web anda.
Atas ialah kandungan terperinci Peranan hover dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
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)
Topik panas
Harga Bitcoin sejak kelahirannya 2009-2025 Ringkasan paling lengkap harga sejarah BTC
Jan 15, 2025 pm 08:11 PM
Sejak penubuhannya pada tahun 2009, Bitcoin telah menjadi peneraju dalam dunia mata wang kripto dan harganya telah mengalami turun naik yang besar. Untuk memberikan gambaran keseluruhan sejarah yang komprehensif, artikel ini menyusun data harga Bitcoin dari 2009 hingga 2025, meliputi peristiwa pasaran utama, perubahan dalam sentimen pasaran dan faktor penting yang mempengaruhi pergerakan harga.
Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui
May 09, 2024 pm 02:43 PM
1. Mula-mula, buka ikon tetapan di sudut kiri bawah dan klik pilihan tetapan 2. Kemudian, cari lajur CSS dalam tetingkap lompat .
Cara mengasingkan gaya dalam komponen dalam vue
May 09, 2024 pm 03:57 PM
Pengasingan gaya dalam komponen Vue boleh dicapai dalam empat cara: Gunakan gaya berskop untuk mencipta skop terpencil. Gunakan Modul CSS untuk menjana fail CSS dengan nama kelas yang unik. Atur nama kelas menggunakan konvensyen BEM untuk mengekalkan modulariti dan kebolehgunaan semula. Dalam kes yang jarang berlaku, adalah mungkin untuk menyuntik gaya terus ke dalam komponen, tetapi ini tidak disyorkan.
Langkah grafik untuk menetapkan sifat lalai CSS dalam Visual Studio 2019
May 09, 2024 pm 02:01 PM
1. Buka Visual Studio 2019, cari tetapan pilihannya dan klik CSS. 2. Di sini anda boleh melihat tetapan teknikal atribut berikut. 3. Kini anda boleh menetapkan teks dan mengisi sempadan di sini. 4. Pada masa ini, anda juga boleh menetapkan kedudukan terapung di sini. 5. Pada masa ini, anda juga boleh menetapkan sempadan dan latar belakang di sini untuk menyelesaikan operasi. 6. Akhir sekali, klik butang OK di sini untuk menetapkan sifat lalai CSS.
Gambaran keseluruhan harga sejarah Bitcoin sejak kelahirannya Koleksi lengkap trend harga sejarah Bitcoin.
Jan 15, 2025 pm 08:14 PM
Bitcoin, sebagai mata wang kripto, telah mengalami turun naik pasaran yang ketara sejak penubuhannya. Artikel ini akan memberikan gambaran keseluruhan harga sejarah Bitcoin sejak kelahirannya untuk membantu pembaca memahami arah aliran harga dan detik pentingnya. Dengan menganalisis data harga sejarah Bitcoin, kami dapat memahami penilaian pasaran terhadap nilainya, faktor yang mempengaruhi turun naiknya, dan menyediakan asas untuk keputusan pelaburan masa hadapan.
Senarai harga sejarah sejak kelahiran carta Trend Harga Sejarah Bitcoin BTC (Ringkasan Terkini)
Feb 11, 2025 pm 11:36 PM
Sejak penciptaannya pada tahun 2009, harga Bitcoin telah mengalami beberapa turun naik utama, meningkat kepada $ 69,044.77 pada November 2021 dan jatuh ke $ 3,191.22 pada Disember 2018. Sehingga Disember 2024, harga terkini telah melebihi $ 100,204.
Bagaimana untuk mendaftar untuk pertukaran Bitstamp pro? Adakah ia selamat? Adakah ia formal?
Aug 13, 2024 pm 06:36 PM
Bagaimana untuk mendaftar BitstampPro? Lawati tapak web BitstampPro. Isikan maklumat peribadi dan alamat e-mel anda. Buat kata laluan dan terima syarat. Sahkan alamat e-mel. Adakah BitstampPro selamat? Pengesahan diperlukan. Menguatkuasakan penggunaan pengesahan dua faktor. Kebanyakan aset disimpan dalam storan sejuk. Gunakan HTTPS untuk menyulitkan komunikasi. Menjalankan audit keselamatan secara berkala. Adakah BitstampPro sah? Berdaftar di Luxembourg. Dikawal oleh Jawatankuasa Penyeliaan Kewangan Luxembourg. Mematuhi peraturan pencegahan pengubahan wang haram dan kenali pelanggan anda.
Harga terbaru Bitcoin pada 2018-2024 USD
Feb 15, 2025 pm 07:12 PM
Harga USD Bitcoin masa nyata Faktor yang menjejaskan harga bitcoin Petunjuk untuk meramalkan harga bitcoin masa depan Berikut adalah beberapa maklumat penting mengenai harga Bitcoin pada 2018-2024:
