Bagaimana untuk Memaparkan Teks pada Hover Imej Menggunakan CSS dan jQuery?

Memaparkan Teks pada Tuding Imej

Mencipta kotak kecil yang muncul apabila pengguna menuding pada imej boleh dicapai melalui pelbagai kaedah. Berikut ialah panduan komprehensif untuk membantu anda mencapai kesan yang diingini:

CSS3 Menggunakan :hover Pseudoelement

Dengan menggunakan :hover pseudoelement dalam CSS3, anda boleh memaparkan kotak pada gambar berlegar. Kod HTML dan CSS untuk kaedah ini adalah seperti berikut:

<div>

#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

#wrapper:hover .text {
  visibility: visible;
}

jQuery

Sebagai alternatif, anda boleh menggunakan jQuery untuk mencapai hasil yang sama. Berikut ialah kod HTML, CSS dan jQuery:

<div>

#wrapper p {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

$('.hover').mouseover(function() {
  $('.text').css("visibility", "visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility", "hidden");
});

Kod jQuery ini akan menunjukkan elemen "teks" apabila tetikus melayang di atas imej dan menyembunyikannya apabila tetikus pergi.

Menyesuaikan Kotak

Untuk menyesuaikan saiz dan kedudukan kotak, anda boleh melaraskan nilai CSS yang disediakan di bahagian bawah: dan kiri: sifat. Untuk mengalih keluar sambungan sempadan pada imej, tambahkan yang berikut pada CSS anda:

#wrapper img {
  border: none;
}

Berbilang Imej dan Kapsyen

Jika anda mempunyai berbilang imej dan kapsyen, anda boleh membuat div pembalut untuk setiap imej dan memasukkan elemen imej dan teks di dalamnya. Hanya salin format yang ditunjukkan dalam coretan kod dan gantikan sumber imej dan teks dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Teks pada Hover Imej Menggunakan CSS dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!