Bagaimana untuk melaksanakan kandungan gesaan kotak kecil yang muncul apabila tetikus dialihkan dalam javascript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan kandungan gesaan kotak kecil yang muncul apabila tetikus dialihkan dalam javascript

WBOY

Lepaskan： 2023-05-09 11:53:36

asal

1181 orang telah melayarinya

JavaScript ialah bahasa pengaturcaraan yang sangat berkuasa yang boleh digunakan untuk melaksanakan pelbagai fungsi, termasuk fungsi menggerakkan tetikus ke dalam kotak kecil untuk menggesa kandungan. Dalam artikel ini, kami akan memperincikan cara melaksanakan fungsi ini menggunakan JavaScript.

1. Struktur HTML

Pertama, kita perlu membuat halaman HTML dan menambah beberapa elemen yang memerlukan kandungan segera pada halaman tersebut. Sebagai contoh, kita boleh membuat senarai yang mengandungi beberapa pautan.

<ul>
  <li><a href="#" class="tooltip">Link 1</a></li>
  <li><a href="#" class="tooltip">Link 2</a></li>
  <li><a href="#" class="tooltip">Link 3</a></li>
  <li><a href="#" class="tooltip">Link 4</a></li>
  <li><a href="#" class="tooltip">Link 5</a></li>
</ul>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan nama kelas "petua alat" untuk mengenal pasti elemen di mana kandungan petua alat perlu ditambahkan.

2. Gaya CSS

Seterusnya, kita perlu menambah gaya CSS pada elemen ini untuk memaparkan kandungan segera apabila tetikus bergerak masuk. Kita boleh menggunakan kelas pseudo CSS ":selepas" untuk mencipta kotak gesaan dan menggunakan atribut CSS "kandungan" untuk menambah teks gesaan. Contohnya:

.tooltip {
  position: relative;
}

.tooltip:hover:after {
  content: "This is a tooltip";
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  z-index: 999;
}

Salin selepas log masuk

Dalam contoh ini, kami menggunakan atribut "kedudukan: relatif" untuk menetapkan kedudukan relatif elemen dan atribut "kedudukan: mutlak" untuk menetapkan kedudukan mutlak petua alat. Kami juga menggunakan atribut "atas: 100%" dan "kiri: 0" untuk meletakkan petua alat di bawah elemen. Kami juga menggunakan beberapa sifat CSS lain untuk menggayakan petua alat, seperti "padding", "background-color", "color", dan "border-radius".

3. Kod JavaScript

Sekarang kita telah mencipta struktur HTML dan gaya CSS, kita perlu menggunakan JavaScript untuk melaksanakan fungsi menggerakkan tetikus ke dalam kandungan gesaan kotak kecil.

Kami boleh menggunakan fungsi addEventListener() JavaScript untuk mendengar peristiwa bergerak masuk dan keluar tetikus, dan menggunakan atribut gaya JavaScript untuk menetapkan gaya elemen. Contohnya:

var tooltips = document.querySelectorAll('.tooltip');

for (var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mouseover', function() {
    this.style.position = 'relative';
  });
  
  tooltips[i].addEventListener('mouseout', function() {
    this.style.position = '';
  });
}

Salin selepas log masuk

Dalam contoh ini, kami menggunakan fungsi document.querySelectorAll() untuk memilih semua elemen dengan nama kelas "tip alat" dan menggunakan fungsi gelung for dan addEventListener() untuk mendengar pergerakan tetikus masuk dan keluar masing-masing. Apabila tetikus bergerak masuk, kami menggunakan kata kunci ini untuk menetapkan sifat "kedudukan" elemen semasa kepada "relatif", dan apabila tetikus bergerak keluar, kami menetapkan sifat "kedudukan" kepada kosong. Semasa proses ini, penyemak imbas akan menunjukkan atau menyembunyikan kotak gesaan mengikut gaya CSS.

4. Contoh kod lengkap

Akhir sekali, mari kita lihat contoh kod lengkap:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript Tooltip</title>
  <style>
    .tooltip {
      position: relative;
    }

    .tooltip:hover:after {
      content: "This is a tooltip";
      position: absolute;
      top: 100%;
      left: 0;
      padding: 5px;
      background-color: #000;
      color: #fff;
      border-radius: 5px;
      z-index: 999;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#" class="tooltip">Link 1</a></li>
    <li><a href="#" class="tooltip">Link 2</a></li>
    <li><a href="#" class="tooltip">Link 3</a></li>
    <li><a href="#" class="tooltip">Link 4</a></li>
    <li><a href="#" class="tooltip">Link 5</a></li>
  </ul>

  <script>
    var tooltips = document.querySelectorAll('.tooltip');

    for (var i = 0; i < tooltips.length; i++) {
      tooltips[i].addEventListener('mouseover', function() {
        this.style.position = 'relative';
      });

      tooltips[i].addEventListener('mouseout', function() {
        this.style.position = '';
      });
    }
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan HTML, CSS dan Teknologi JavaScript digunakan untuk merealisasikan fungsi menggesa kandungan dalam kotak kecil apabila tetikus digerakkan. Sila ubah suai dan laraskan mengikut keperluan untuk memenuhi keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kandungan gesaan kotak kecil yang muncul apabila tetikus dialihkan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!