Bagaimana untuk Memaparkan Teks pada Mouseover Imej dengan CSS dan jQuery?

Teks Tetikus pada Imej

Pengguna sering menghadapi cabaran apabila cuba memaparkan teks pada imej semasa tuding tetikus. Teknik petua alat konvensional mungkin tidak sentiasa sejajar dengan keperluan estetika atau kebolehcapaian yang diingini. Artikel ini menyelidiki pendekatan berasaskan CSS dan jQuery untuk mencapai penyelesaian yang anggun dan cekap.

Pendekatan CSS

Memanfaatkan kuasa pseudoelemen :hover dalam CSS3, kami boleh mencapai kesan yang diingini tanpa pengetahuan JavaScript. Struktur HTML memerlukan div pembalut yang merangkumi kedua-dua imej dan teks. Peraturan CSS meletakkan elemen teks di bawah imej, pada mulanya tersembunyi dengan visibility:hidden. Apabila melayang di atas imej (class="hover"), teks menjadi kelihatan (visibility:visible).

HTML:

<div>

CSS :

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

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

jQuery Pendekatan

Bagi mereka yang mahir dalam jQuery, kaedah alternatif wujud. Dalam pendekatan ini, jQuery mengawal keterlihatan elemen teks pada tetikus dan daun tetikus acara.

HTML:

<div>

CSS:

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

jQuery:

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

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

Kesimpulan

Kedua-duanya CSS dan jQuery menyediakan penyelesaian yang berdaya maju untuk memaparkan teks pada tetikus imej. Pilihan antara kaedah bergantung pada keutamaan peribadi dan kemahiran teknikal. Dengan memanfaatkan teknik ini, pembangun boleh meningkatkan pengalaman pengguna dan mencipta interaksi yang menyenangkan dari segi estetika.

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