用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

jquery 自定义超链接提示样式

2013-03-15 作者: 小蜜锋举报

[javascript]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>文字提示</title><!--   引入jQuery -->

  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript">
</script>
  <style type="text/css">
/*<![CDATA[*/
  body{
        margin:0;
        padding:40px;
        background:#fff;
        font:80% Arial, Helvetica, sans-serif;
        color:#555;
        line-height:180%;
  }
  p{
        clear:both;
        margin:0;
        padding:.5em 0;
  }
  /* tooltip */
  #tooltip{
        position:absolute;
        border:1px solid #333;
        background:#f7f5d1;
        padding:1px;
        color:#333;
        display:none;
  }
  /*]]>*/
  </style>
  <script type="text/javascript">
//<![CDATA[
  $(function(){
    var x = 10;  
        var y = 20;
        $("a.tooltip").mouseover(function(e){
        this.myTitle = this.title;
                this.title = "";        
            var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
                $("body").append(tooltip);      //把它追加到文档中
                $("#tooltip")
                        .css({
                                "top": (e.pageY+y) + "px",
                                "left": (e.pageX+x)  + "px"
                        }).show("fast");          //设置x坐标和y坐标,并且显示
    }).mouseout(function(){             
                this.title = this.myTitle;
                $("#tooltip").remove();   //移除 
    }).mousemove(function(e){
                $("#tooltip")
                        .css({
                                "top": (e.pageY+y) + "px",
                                "left": (e.pageX+x)  + "px"
                        });
        });
  })
  //]]>
  </script>
</head>

<body>
  <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>

  <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>

  <p><a href="#" title="这是自带提示1.">自带提示1.</a></p>

  <p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
</html>

[代码运行效果截图]


jquery 自定义超链接提示样式


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...