Bagaimanakah Saya Boleh Memaparkan Teks pada Tuding Imej Tanpa Menggunakan Petua Alat?

Memaparkan Teks pada Tuding Imej Tanpa Petua Alat

Dalam reka bentuk web, selalunya wajar untuk memaparkan maklumat tambahan apabila pengguna menuding pada imej. Walaupun petua alat merupakan penyelesaian yang popular, ia mungkin tidak selalu memberikan estetik atau fungsi yang diingini. Artikel ini meneroka cara untuk mencapai kesan ini menggunakan CSS atau jQuery tulen.

Menggunakan CSS:

CSS3 memperkenalkan pseudoelemen :hover, yang membenarkan penggayaan apabila tetikus melayang atas sesuatu unsur. Dalam kes ini, kesan tuding akan digunakan pada imej.

HTML:

<div>

CSS:

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

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

CSS ini meletakkan kapsyen teks di sudut kiri bawah imej dan menyembunyikannya sehingga tetikus melayang di atas imej.

Menggunakan jQuery:

jQuery juga boleh digunakan untuk mencapai kesan yang sama. Kaedah ini mungkin memberikan lebih fleksibiliti untuk senario yang lebih kompleks.

HTML:

Sama seperti sebelum ini.

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");
});

Skrip jQuery ini mengikat acara alih tetikus dan keluar tetikus ke elemen imej dan togol keterlihatan kapsyen.

Tidak kira kaedah digunakan, dengan menggunakan CSS atau jQuery, adalah mungkin untuk mencipta kesan tuding tersuai yang memaparkan maklumat tambahan pada imej tanpa menggunakan petua alat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Teks pada Tuding Imej Tanpa Menggunakan Petua Alat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!