Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Petua Alat Dinamik dengan Kesan Fade-in/Fade-out untuk Elemen Div?

Bagaimana untuk Mencipta Petua Alat Dinamik dengan Kesan Fade-in/Fade-out untuk Elemen Div?

Linda Hamilton
Lepaskan: 2024-12-18 18:30:17
asal
746 orang telah melayarinya

How to Create a Dynamic Tooltip with Fade-in/Fade-out Effects for a Div Element?

Tambahkan Petua Alat Dinamik pada Elemen div

Soalan:

Pertimbangkan elemen div dengan label dan medan input:

<div>
  <label>Name</label>
  <input type="text"/>
</div>
Salin selepas log masuk

Bagaimanakah anda membuat petua alat yang muncul apabila pengguna menuding di atas elemen div, dengan kesan fade-in/fade-out?

Jawapan:

Untuk petua alat asas yang memaparkan mesej statik, anda boleh menggunakan atribut tajuk:

<div title="This is my tooltip">
Salin selepas log masuk

Walau bagaimanapun, untuk petua alat dengan teks dinamik dan kesan pudar animasi, pendekatan yang lebih maju ialah diperlukan:

  1. Buat animasi CSS untuk petua alat.
  2. Tambahkan pendengar acara JS untuk mengendalikan acara tuding.
  3. Buat elemen DOM petua alat dan letakkannya relatif kepada div.
  4. Tambah/buang petua alat dengan menggunakan animasi CSS apabila menuding/mengalih keluar tuding.

Berikut ialah contoh menggunakan JavaScript dan CSS:

.tooltip {
  display: none;
  position: absolute;
  padding: 10px;
  color: white;
  border: 1px solid black;
  opacity: 0;
  transition: all 0.2s;
}

.tooltip.show {
  display: block;
  opacity: 1;
}
Salin selepas log masuk
// Create a tooltip element
const tooltip = document.createElement('span');
tooltip.classList.add('tooltip');

// Add the event listener to the div
const div = document.querySelector('div');
div.addEventListener('mouseover', (e) => {
  // Set the tooltip text
  tooltip.textContent = 'This is my tooltip';

  // Position the tooltip
  tooltip.style.left = e.x + 'px';
  tooltip.style.top = e.y + 'px';

  // Add the tooltip to the body
  document.body.appendChild(tooltip);

  // Add the show class to the tooltip
  tooltip.classList.add('show');
});

div.addEventListener('mouseout', () => {
  // Remove the tooltip from the body
  document.body.removeChild(tooltip);
});
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Petua Alat Dinamik dengan Kesan Fade-in/Fade-out untuk Elemen Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan