Méthode JQuery pour obtenir un lien hypertexte avec l'invite de la souris effect_jquery

L'exemple de cet article décrit comment JQuery implémente l'effet d'invite de souris des hyperliens. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Le navigateur est déjà livré avec une invite de lien hypertexte. Il vous suffit d'ajouter l'attribut title au lien hypertexte. Cependant, la vitesse de réponse de cet effet rapide est très lente, avec un délai d'environ 1 seconde. Ce dont nous avons besoin maintenant, c'est qu'une invite apparaisse au moment où la souris se déplace vers le lien hypertexte. À ce stade, vous devez supprimer l’effet d’invite de titre dans la balise a et créer vous-même une invite avec des fonctions similaires.

La conception HTML est la suivante :

Copier le code Le code est le suivant :

Bienvenue à la Script House

Ajoutez ensuite les événements mouseover et mouseout pour le lien hypertexte avec l'info-bulle de classe :

$("a.tooltip").mouseover(function (){  
    //显示 title  
}).mouseout(function (){  
    //隐藏 title  
});

Les idées spécifiques pour obtenir cet effet sont les suivantes :

1. Lorsque la souris glisse sur le lien hypertexte, créez un élément div et le contenu de l'élément div est la valeur de l'attribut title. L'élément créé est ensuite ajouté au document. Définissez les coordonnées x et y pour qu'elles s'affichent à côté de la position de la souris.
2. Lorsque la souris glisse hors du lien hypertexte, supprimez l'élément div.

Selon les idées d'analyse, écrivez le code JQuery suivant :

$(function(){  
  var x = 10;   
  var y = 20;  
  $("a.tooltip").mouseover(function(e){  
    this.myTitle = this.title;  
    this.title = "";    
    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
    //创建 div 元素  
    $("body").append(tooltip); //把它追加到文档中  
    $("#tooltip")  
      .css({  
        "top": (e.pageY + y) + "px",  
        "left": (e.pageX + x) + "px" 
      }).show("fast"); //设置x坐标和y坐标，并且显示  
  }).mouseout(function(){    
    this.title = this.myTitle;  
    $("#tooltip").remove(); //移除  
  });  
});

Il y a deux problèmes avec l'effet à ce moment-là : d'une part, lorsque la souris glisse dessus, l'invite de l'attribut title dans la balise a apparaîtra également ; à la distance entre l'invite créée par vous-même et la souris. Une trop grande proximité peut parfois entraîner des problèmes tels que l'impossibilité d'inviter (le changement de focus de la souris provoque un événement mouseout).

Afin de supprimer la fonction d'invite de titre dans la balise a, vous devez effectuer les étapes suivantes :

1. Lorsque la souris glisse, ajoutez un nouvel attribut à l'objet, transmettez la valeur du titre à cet attribut, puis effacez la valeur du titre de l'attribut.

this.myTitle = this.title;  
s.title = "";   
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
//创建 div 元素

2. Lorsque la souris glisse, la valeur de l'attribut myTitle de l'objet est attribuée au titre de l'attribut.

Copier le code Le code est le suivant :

this.title = this.myTitle;

Pourquoi la valeur de l'attribut doit-elle être attribuée au titre de l'attribut lorsque la souris glisse vers l'extérieur ? Parce que lorsque la souris glisse vers l'extérieur, la valeur de l'attribut title lors de son nouveau glissement doit être prise en compte. Si la valeur de myTitle n'est pas réaffectée à l'attribut title, lorsque la souris glisse à nouveau, la valeur de title sera vide.

Afin de résoudre le deuxième problème, vous devez réinitialiser les valeurs supérieure et gauche de l'élément d'invite. Le code est le suivant, en ajoutant 10px en haut et 20px à gauche :

var x = lO;  
var y = 20;  
$("#tooltip").css({  
    "top": (e.pageY+y) + "px",  
    "left": (e.pageX+x) + "px" 
});

OK, le problème est résolu ici et l'effet d'invite de lien hypertexte de la souris est réalisé.

J'espère que cet article sera utile à la programmation jQuery de chacun.