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>
<p><strong>CSS :</strong></p>
<pre class="brush:php;toolbar:false">#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>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#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.