JQuery implements the line text link prompt effect method, jquery text link
This example describes how jQuery implements the row text link prompts. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> prompt effect of one line of text </title>
<Script type = 'text/javascript 'src = '/ajaxjs/jquery1.3.2.js'> </script>
<Script type = "text/javascript">
$ (Function (){
$ (". Div ul li"). hover (function (e ){
Var x = e. pageX;
Var y = e. pageY;
Var div = $ ("<div id = 'div _ show'> </div> ");
Var text=((this#.html ();
$ (This). append (div );
$ ("# Div_show" ).html(text).css ({"height": "25px", "position": "absolute", "zIndex": "99", "backgroundColor ": "#38F758", "whiteSpace": "nowrap", "paddingLeft": "15px", "paddingRight": "15px", "top ": y + 10 + "px", "left": x + 10 + "px "});
$ ("This"). children ("# div_show"). show ();
}, Function (){
$ (This). children ("# div_show"). remove ();
})
})
</Script>
<Style type = "text/css">
Ul {margin: 0; padding: 0 ;}
Ul li {list-style: none ;}
. Div {width: 200px; float: left; display: inline ;}
. Div ul li {width: 220px; padding: 0px 6px; line-height: 25px; height: 25px; margin-top: 1px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis ;}
</Style>
</Head>
<Body>
<Div class = "div">
<Ul>
<Li> Well, now HTML5 is popular. I will add HTML5 to its title. </li>
<Li> the Raphael js library was heard at the webrebuild Meeting </li>
<Li> let's take a brief look at the css appearance mentioned above </li>
</Ul>
</Div>
</Body>
</Html>
I hope this article will help you with jQuery programming.