recherche

Maison >interface Web >Questions et réponses frontales >Comment implémenter le contenu de l'invite de petite boîte qui apparaît lorsque la souris est déplacée en javascript

Comment implémenter le contenu de l'invite de petite boîte qui apparaît lorsque la souris est déplacée en javascript

WBOY
WBOYoriginal
2023-05-09 11:53:361142parcourir

JavaScript est un langage de programmation très puissant qui peut être utilisé pour implémenter diverses fonctions, y compris la fonction permettant de déplacer la souris dans une petite boîte pour afficher du contenu. Dans cet article, nous détaillerons comment implémenter cette fonctionnalité à l'aide de JavaScript.

1. Structure HTML

Tout d'abord, nous devons créer une page HTML et ajouter quelques éléments qui doivent être ajoutés à la page. Par exemple, nous pouvons créer une liste contenant des liens. 

<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>

Dans cet exemple, nous utilisons le nom de classe "tooltip" pour identifier l'élément où le contenu de l'info-bulle doit être ajouté.

2. Styles CSS

Ensuite, nous devons ajouter des styles CSS à ces éléments pour afficher le contenu de l'invite lorsque la souris entre. Nous pouvons utiliser la pseudo-classe CSS ":after" pour créer une boîte d'invite et utiliser l'attribut CSS "content" pour ajouter un texte d'invite. Par exemple : 

.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;
}

Dans cet exemple, nous utilisons l'attribut "position : relative" pour définir le positionnement relatif de l'élément, et l'attribut "position : absolue" pour définir le positionnement absolu de l'info-bulle. Nous avons également utilisé les attributs « top : 100% » et « left : 0 » pour placer l'info-bulle sous l'élément. Nous utilisons également d'autres propriétés CSS pour styliser l'info-bulle, telles que "padding", "background-color", "color" et "border-radius".

3. Code JavaScript

Maintenant que nous avons créé la structure HTML et le style CSS, nous devons utiliser JavaScript pour implémenter la fonction d'invite du contenu d'une petite boîte lorsque la souris y est déplacée.

Nous pouvons utiliser la fonction addEventListener() de JavaScript pour écouter les événements d'entrée et de sortie de la souris, et utiliser l'attribut style de JavaScript pour définir le style de l'élément. Par exemple : 

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 = '';
  });
}

Dans cet exemple, nous utilisons la fonction document.querySelectorAll() pour sélectionner tous les éléments avec le nom de classe "tooltip", et utilisons la boucle for et la fonction addEventListener() pour écouter les mouvements de la souris. -événements respectivement. Lorsque la souris entre, nous utilisons le mot-clé this pour définir la propriété "position" de l'élément actuel sur "relative", et lorsque la souris sort, nous définissons la propriété "position" sur vide. Au cours de ce processus, le navigateur affichera ou masquera la boîte de dialogue en fonction du style CSS.

4. Exemple de code complet

Enfin, jetons un coup d'œil à l'exemple de code complet : 

<!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>

Dans cet exemple, nous utilisons trois technologies : HTML, CSS et JavaScript pour réaliser le contenu de l'invite de petite boîte qui apparaît lorsque la souris est déplacé. Veuillez modifier et ajuster si nécessaire pour répondre à vos besoins spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html for 循环 事件 this position padding border 伪类 background
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Où définir javascript sur votre ordinateurArticle suivant：Où définir javascript sur votre ordinateur

Articles Liés

Voir plus