Rumah > Artikel > hujung hadapan web > Bagaimana untuk memaparkan fon pada tetikus imej?
Bagaimana untuk memaparkan fon pada tetikus imej?
- WBOYke hadapan
- 2023-09-13 08:09:022891semak imbas
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='https://www.tutorialspoint.com/html/images/html-mini-logo.jpg' 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='https://www.tutorialspoint.com/java/images/java-mini-logo.jpg' 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=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="https://www.tutorialspoint.com/static/images/logo-color.png" 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!