This article describes how to use Jquery to create a layer to display the title content and move it with the mouse. The specific implementation is as follows:
The Code is as follows: <script src = "Core/Public/js/jquery. js "type =" text/javascript "> </script> // introduce Jquery <style type =" text/css "> // write the style of the created div # tooltip {position: absolute; border: 1px # solid #333; background: # f7f5d1; padding: 1px; color: #333; display: none ;} </style> <script type = "text/javascript"> // write JS Code $ (function () {var x = 10; var y = 10; $ (". tooltip "). mouseover (function (e) {// this. myTitle = this. title; this. title = ""; var tooltip = "<div id = 'tooltip '>" + this. myTitle + "</div>"; $ ("body "). append (tooltip); $ ("# tooltip" ).css ({"top": (e. pageY + y) + "px", "left": (e. pageX + x) + "px "}). show ("fast ");}). mouseout (function () {// this. title = this. myTitle; $ ("# tooltip "). remove ();}). mousemove (function (e) {// $ ("# tooltip" ).css ({"top": (e. pageY + y) + "px", "left": (e. pageX + x) + "px "});});}); </script> // html code <ul> <li> <a href = "#" class = "tooltip" title = "Sweet and loose sweater"> 1111111111111 </a> </li> <a href = "#" class = "tooltip" title = "it's plain"> 2222222222222 </a> </li> </ul>