Move the cursor over the link to see text description, text description

Move the cursor over the link to see text description, text description

Move the mouse over the link to show text instructions:
For a hyperlink <a> label, there is a title attribute. When the mouse table is suspended over the link, the attribute value of the title will be displayed. Although it meets our needs to a certain extent, however, the appearance is not satisfactory, and the style cannot be modified. The following describes how to use jquery to simulate this function.
The Code is as follows:

 

<! DOCTYPE html> 
 
When the above Code is hovering over a link, text instructions can appear and can be moved with the mouse. The following describes how to implement the Code.
I. Code comments:
1. $ (function () {). When the final structure is fully loaded, run the code in the function.
2. var x = 7, var y = 8, declare two variables to define the horizontal and vertical distance between the mouse pointer and the pop-up layer.
3. $ (". tip "). hover (function () {}, function () {}), add the function to be executed when the mouse is suspended and the mouse leaves for the specified link.
4. var title = this. title: Assign the title attribute value of the current link to the variable title.
5. var $ div = $ ("<div id = 'newtip '>" + title + "</div>") to create a jquery object, which is actually placed into the title attribute value in the div, this is the layer to be popped up.
6. $ (this). append ($ div), add the created div to the current link <a>.
7.20.(this).css ({"position": "relative"}), set hyperlink a to relative positioning. Because the pop-up layer is absolute positioning, the positioning reference object can be link.
8. Adjust div.css ({"position": "absolute", "background": "pink"}), set div to absolute positioning, and the background color is pink.
9.20.div.css ({"width": "120px", "height": "30px"}) to set the div size.
10. $ ("# newTip"). remove () to delete the element of the specified id. Here, the pop-up div is deleted.
11. mousemove (function (e) {}): registers the mousemove event processing function. Of course, the chain call is used here.
12. var $ div = $ ("# newTip" ).css ({"left": (e. pageX + x) + 'px ', "top": (e. pageY + y) + 'px '}), set the left and top attribute values of the pop-up div to achieve the following effect.
Ii. Related reading:
1. For details about hover (), refer to the hover event section of jQuery.
2. For details about this, refer to the section "this usage in javascript.
3. For details about the append () function, refer to the append () method section of jQuery.
4. For details about the css () function, see the css () method section of jQuery.
5. remove () function jQuery's remove () method.
6. For details about the mousemove event, refer to jQuery's mousemove event.
7. e. pageX can be found in the event. pageX attribute section of jQuery.
8. For relative positioning, see the relative positioning section of CSS.
9. For absolute positioning, see absolute positioning in CSS.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 11405.
For more information, see: http://www.softwhy.com/jquery/