Copy codeThe Code is as follows:
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Script type = "text/javascript" src = "scripts/jquery-1.4.2.min.js"> </script>
<Script>
/* Text prompt */
/*
(1) When the mouse moves in, create a div whose content is the value of the title attribute.
(2) Specify the position and set the css style
(3) When the mouse is removed, remove the div
(4) When the mouse moves, the X-y axis must change accordingly.
*/
$ (Function (){
Var x = 7;
Var y = 8;
$ ("A. tip"). hover (function (){
Var title = this. title;
Var $ div =$ ("<div id = 'newtip '>" + title + "</div> ");
$ ("Body"). append ($ div );
$Div.css ({"position": "absolute", "background": "pink "});
}, Function (){
$ ("# NewTip"). remove ();
}). Mousemove (function (e ){
Var $ div = $ ("# newTip" ).css ({"left" :( e. pageX + x) + 'px ', "top" :( e. pageY + y) + 'px '});
});
})
</Script>
</Head>
<Body>
<A href = "#" class = "tip" title = "this is my prompt"> This Is My prompt </a>
</Body>
</Html>