Bagaimana untuk memaparkan fon pada tetikus imej?
Tugas yang akan kami laksanakan dalam artikel ini ialah cara memaparkan fon apabila menuding tetikus pada imej. Mari selami artikel ini dan lihat dengan pantas pada tuding dan tetikus dalam HTML.
Acaraonmouseover dalam HTML dicetuskan apabila penuding tetikus menyentuh elemen. Apabila penunjuk tetikus meninggalkan elemen, peristiwa yang dipanggil onmouseout berlaku.
Kelas pseudo CSS :hover sepadan apabila pengguna berinteraksi dengan elemen menggunakan peranti penunjuk, tetapi ia tidak sentiasa diaktifkan. Biasanya, ia diaktifkan apabila pengguna mengarahkan kursor ke atas elemen (penunjuk tetikus).
Tatabahasa
Berikut ialah sintaks untuk tuding -
:hover
Untuk lebih memahami memaparkan fon apabila menuding pada imej, mari lihat contoh berikut.
Contoh
Dalam contoh di bawah, kami menjadikan fon kelihatan apabila tetikus dituding di atas imej.
<!DOCTYPE html>
<html>
<body>
<style>
.img {
position: relative;
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
}
.img div{
position: absolute;
bottom: 0;
right: 0;
background: black;
color: white;
margin-bottom: 5px;
visibility: hidden;
}
.img:hover{
cursor: pointer;
}
.img:hover div{
width: 150px;
padding: 8px 15px;
visibility: visible;
opacity: 0.7;
}
</style>
<div class="img">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Bagaimana untuk memaparkan fon pada tetikus imej?" >
<div>TP HTML LOGO</div>
</div>
<div class="img">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Bagaimana untuk memaparkan fon pada tetikus imej?" >
<div>TP JAVA LOGO</div>
</div>
</body>
</html>Apabila skrip dilaksanakan, ia akan menghasilkan output yang memaparkan imej pada halaman web. Jika pengguna menuding pada imej, ia akan memaparkan penerangan teks bagi imej khusus tersebut pada halaman.
Contoh
Dalam contoh di bawah, kami membuat fon muncul apabila tetikus berada di atas imej, dan menutup keseluruhan imej.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
position: relative;
max-width: 500px;
}
.tutorial img { width: 100%; }
.fulltext {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
text-align: center;
padding-top: 30%;
background-color: #EAFAF1 ;
color: black;
}
.fulltext {
visibility: none; opacity: 0;
transition: opacity 0.3s;
}
.tutorial:hover .fulltext {
visibility: visible; opacity: 1;
}
</style>
<div class="tutorial">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" src=https://www.tutorialspoint.com/java/images/java-mini-logo.jpg alt="Bagaimana untuk memaparkan fon pada tetikus imej?" >
<div class="fulltext">
LEARN JAVA...!<br>
</div>
</div>
</body>
</html>Apabila anda menjalankan skrip di atas, tetingkap output akan muncul untuk memaparkan imej pada halaman web. Jika pengguna menggerakkan tetikus ke atas imej, ia akan memaparkan teks yang meliputi keseluruhan imej.
Contoh
Laksanakan kod berikut dan perhatikan bagaimana fon muncul apabila anda mengarahkan tetikus pada imej.
<!DOCTYPE html>
<html>
<body>
<style>
div {
position: relative;
top: 0px;
left: 0px;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
text-align: center
}
img {
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%
}
img:hover {
opacity: 0;
transition:opacity 2s;
}
heading {
line-height: 40px;
font-weight: bold;
text-align: center;
position: absolute;
display: block
}
div p {
width: 420px;
line-height: 20px;
display: inline-block;
padding: 200px 0px;
vertical-align: middle;
height: 450px
}
</style>
<div>
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" alt="Bagaimana untuk memaparkan fon pada tetikus imej?" >
<p>Welcome to Tutorialspoint</p>
</div>
</body>
</html>Apabila skrip dilaksanakan, tetingkap output akan muncul, menjadikan imej muncul sebagai bulatan pada halaman web. Apabila pengguna menuding pada imej, ia akan memaparkan teks.
Atas ialah kandungan terperinci Bagaimana untuk memaparkan fon pada tetikus imej?. 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
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)
Topik panas
1393
52
1205
24
butiran laluan folder fon win10
Jan 03, 2024 pm 08:37 PM
Apabila memasukkan teks, ramai rakan suka menambah fon peribadi kegemaran mereka, tetapi mereka tidak tahu di mana laluan folder fon sistem win10 dan tidak boleh menambah fon Perkara berikut akan memperkenalkan laluan folder khusus kepada anda. Laluan folder fon Win10: 1. Klik "PC ini" pada desktop. 2. Masukkan pemacu cakera sistem C. 3. Klik folder "windows". 4. Tarik ke bawah untuk mencari folder "Fon". 5. Anda boleh memasuki perpustakaan fon. Rakan-rakan yang mempunyai soalan lain boleh melihat untuk mengetahui lebih lanjut tentang masalah biasa dengan fon win10~
Bagaimana untuk menukar fon dalam Outlook pada telefon mudah alih Apple
Mar 08, 2024 pm 04:46 PM
Bagaimana untuk menukar fon dalam Outlook pada telefon mudah alih Apple Mula-mula buka perisian Outlook dan klik pada fail di sudut kiri atas antara muka. Anda boleh menetapkan fon mengikut pilihan anda sendiri Selepas tetapan selesai, klik butang OK. Mari kita lihat! Cara menukar fon dalam Outlook pada telefon mudah alih Apple 1. Buka perisian Outlook dan klik pilihan "Fail" di penjuru kiri sebelah atas antara muka. 2. Dalam senarai yang muncul, cari "Pilihan" dan klik untuk masuk. 3. Di sebelah kiri senarai pilihan, klik "Mel". 4. Seterusnya, pilih "Surat dan Fon". 5. Jika anda ingin menetapkan fon untuk e-mel baharu, membalas e-mel atau mengarang, klik pilihan yang sepadan untuk memasukkan tetapan. 6. Tetapkan fon mengikut keutamaan peribadi Selepas tetapan selesai, klik OK.
Bagaimana untuk menyelesaikan masalah kabur fon win11
Jan 13, 2024 pm 09:00 PM
Selepas mengemas kini sistem win11, beberapa rakan mendapati bahawa fon win11 mereka kabur dan sangat tidak selesa untuk digunakan Ini mungkin disebabkan oleh pepijat dalam versi sistem, atau mungkin kita telah menghidupkan kesan khas. Mari lihat bagaimana untuk menyelesaikannya. Fon Win11 kabur: Kaedah 1: 1. Mula-mula, klik kanan komputer ini dan buka "Properties" 2. Kemudian masukkan "Advanced System Settings" dalam pautan yang berkaitan 3. Kemudian klik "Settings" dalam Performance untuk membukanya. 4. Di bawah "Kesan Visual" tandakan "Laraskan untuk Prestasi Terbaik" dan klik "OK" untuk menyimpan. Kaedah 2: 1. Klik kanan ruang kosong pada desktop dan buka "Tetapan Paparan" 2. Klik "Zum" di bawah Zum dan Reka Letak 3. Kemudian klik "Saiz Teks" di bawah tetapan yang berkaitan
Bagaimana untuk menukar fon Xiaomi 11_Cara menukar fon Xiaomi 11
Mar 25, 2024 pm 07:26 PM
1. Buka tetapan telefon dan klik [Paparan]. 2. Klik [Fon]. 3. Pilih fon yang anda suka atau klik [More Fonts] untuk memuat turun apl.
Bagaimana untuk menjadikan fon telefon bimbit vivo lebih besar dan tempat untuk menetapkannya
Feb 24, 2024 pm 06:16 PM
Bagaimana untuk menjadikan saiz fon telefon bimbit vivo lebih besar? , editor membawakan anda tetapan bagaimana untuk menjadikan saiz fon telefon bimbit vivo lebih besar tutorial grafik Kaedah, pengguna yang berminat datang dan lihat! Tutorial penggunaan telefon mudah alih Vivo Bagaimana untuk menjadikan saiz fon telefon bimbit vivo lebih besar Di mana untuk menetapkannya 1. Mula-mula buka fungsi [Settings] dalam telefon bimbit vivo dan klik padanya 2. Kemudian lompat ke antara muka tetapan dan cari Fungsi [Paparan dan Kecerahan]; 3. Kemudian Jangkau halaman dalam gambar di bawah dan klik perkhidmatan [Saiz dan Ketebalan Fon] 4. Akhir sekali, luncurkan garisan mendatar dalam gambar di bawah untuk melaraskan saiz fon.
Penjelasan terperinci tentang kaedah pemasangan fon Win11
Dec 27, 2023 pm 05:16 PM
Sesetengah rakan tidak dapat mencari di mana fon mereka dipasang selepas memasang fon win11, jadi mereka menimbulkan isu lokasi pemasangan fon win11, sebenarnya, kita boleh memasukkan pengurusan fon dalam pemperibadian untuk mencari lokasi fon itu dipasang lihat di bawah. Lokasi pemasangan fon Win11: 1. Pertama, klik kanan ruang kosong pada desktop dan buka tetapan "Pemperibadian". 2. Kemudian masukkan tetapan pengurusan pemasangan "Font". 3. Cari fon yang anda mahu dan masukkannya. 4. Jika anda tidak menemuinya, anda juga boleh mencari terus di atas. 5. Selepas memasukkan fon, anda boleh melihat lokasi pemasangan fon win11 dalam "Font File" di bawah metadata. 6. Jika kita ingin menyahpasang fon, klik Nyahpasang di sini.
Cara yang berkesan untuk menyelesaikan masalah kabur fon Linux
Jan 08, 2024 pm 11:25 PM
Fon Linux adalah kabur Bagaimana saya boleh membuat fon kelihatan jelas? Mari kita lihat tutorial terperinci di bawah. 1. Pasang fail fon 1. Muat turun fail yang disediakan oleh alat di atas, kemudian seret fail ke desktop dan nyahzipnya. Seperti yang ditunjukkan dalam gambar di bawah, kerana fail telah dinyahmampat, ia adalah dalam bentuk folder. 2. Kemudian, tanpa mengklik apa-apa pada desktop, klik kanan dan pilih Buka dalam Terminal. Masukkan arahan dalam terminal: sudodpkg-i dan tekan ruang. Buka fail fon yang dinyahmampat pada desktop, dan seret pakej deb ke dalamnya satu selepas -i arahan ini. Ralat akan muncul selepas menekan Enter, menunjukkan bahawa kebergantungan tidak dipasang. Jika ralat kebergantungan digesa, input arahan adalah normal jika tidak, ia adalah arahan yang salah. Pemula mesti memberi perhatian kepada ruang dan huruf besar.
Bagaimana untuk menukar fon dalam pelayar QQ mudah alih
Apr 07, 2024 pm 06:43 PM
Bagaimana untuk menukar fon dalam pelayar QQ mudah alih? Ramai orang suka menggunakan pelayar QQ pada telefon mudah alih Pelayar ini bukan sahaja boleh menyemak imbas halaman web dengan cepat, tetapi juga memproses pelbagai jenis data fail Selain itu, pelayar ini juga mempunyai tetapan yang diperibadikan mengikut anda pilihan sendiri, ramai pengguna pemula masih tidak tahu cara menukar fon penyemak imbas ini. Artikel ini akan memberi anda gambaran keseluruhan tentang langkah-langkah untuk menukar fon dalam penyemak imbas QQ mudah alih, dengan harapan dapat membantu anda menyelesaikan masalah tersebut. Senarai langkah untuk menukar fon dalam Pelayar QQ mudah alih 1. Hidupkan telefon, dan kemudian klik untuk membuka "Pelayar QQ" (seperti yang ditunjukkan dalam gambar). 2. Pada halaman "Saya" Pelayar QQ, klik logo "Tetapan" di penjuru kanan sebelah atas (seperti yang ditunjukkan dalam gambar). 3. Dalam tetapan, klik untuk memasukkan "Tetapan Fon" (seperti yang ditunjukkan dalam rajah)
