JQuery method to achieve hyperlink mouse prompt effect_jquery

The example in this article describes how JQuery implements the mouse prompt effect of hyperlinks. Share it with everyone for your reference. The specific analysis is as follows:

The browser actually already comes with a hyperlink prompt. You only need to add the title attribute to the hyperlink. However, the response speed of this prompt effect is very slow, with a delay of about 1 second. What we need now is to have a prompt appear the moment the mouse moves to the hyperlink. At this time, you need to remove the title prompt effect in the a tag and make a prompt with similar functions yourself.

HTML design is as follows:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846bee5ac1fed9a1088a27ffed5d6e06a0ca98Welcome to the Script House5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3

Then add mouseover and mouseout events for the hyperlink with class tooltip:

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

The specific ideas to achieve this effect are as follows:

1. When the mouse slides into the hyperlink, create a div element, and the content of the div element is the value of the title attribute. The created element is then appended to the document. Set the x and y coordinates for it so that it displays next to the mouse position.
2. When the mouse slides out of the hyperlink, remove the div element.

According to the analysis ideas, write the following JQuery code:

$(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(); //移除  
  });  
});

There are two problems with the effect at this time: firstly, when the mouse slides over, the prompt of the title attribute in the a tag will also appear; secondly, the problem of setting the x coordinate and y coordinate, due to the distance between the self-made prompt and the mouse Too close may sometimes cause problems such as being unable to prompt (the mouse focus change causes a mouseout event).

In order to remove the title prompt function in the a tag, you need to perform the following steps:

1. When the mouse slides in, add a new attribute to the object, pass the value of title to this attribute, and then clear the value of the attribute title.

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

2. When the mouse slides out, the value of the myTitle attribute of the object is assigned to the attribute title.

Copy code The code is as follows:

this.title = this.myTitle;

Why should the attribute value be assigned to the attribute title when the mouse slides out? Because when the mouse slides out, the value of the attribute title when sliding in again needs to be considered. If the value of myTitle is not reassigned to the title attribute, when the mouse slides in again, the value of title will be empty.

In order to solve the second problem, you need to reset the top and left values ​​​​of the prompt element. The code is as follows, adding 10px to top and 20px to left:

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

OK, the problem is solved here, and the mouse hyperlink prompt effect is realized.

I hope this article will be helpful to everyone’s jQuery programming.