jQuery文字提示效果

最新推荐文章于 2024-09-07 05:06:59 发布

haiwei_sun

最新推荐文章于 2024-09-07 05:06:59 发布

阅读量727

点赞数

文章标签： jquery function xhtml class html border

本文链接：https://blog.csdn.net/helen_shw/article/details/5139545

版权

<!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>
    <title>无标题页</title>
    <style type="text/css">
#tooltip{border:1px solid #999;background:Silver; color:#fff;padding:5px;display:none;position:absolute;}
</style>
    <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
    <script type="text/javascript">
        $(function(){
           var x=0;
           var y=20;

           $("a.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-x) + "px",
                       "left": (e.pageX+y) + "px"
                     }).show("fast");
           }).mouseout(function(){
               this.title=this.myTitle;
               $("#tooltip").remove();
           }).mousemove(function(e){
              $("#tooltip")
                   .css({
                     "top": (e.pageY-x) + "px",
                     "left": (e.pageX+y) + "px"
                   });
           });
        });
    </script>
</head>
<body>
<p><a href="#" class="tooltip" title="这个是我的超链接提示1.">提示1</a></p>
<p><a href="#" class="tooltip" title="这个是我的超链接提示2.">提示2</a></p>