zoukankan      html  css  js  c++  java
  • 手写一个关于title属性自定义提示框解决浏览器(IE)不兼容问题

    <html>
    <head>
    <meta charset="utf-8">
        <title>无标题页</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(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元素
            $("#link").append(tooltip);  //追加到文档中
            $("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show(); //设置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>
    <style>
    #tooltip{
        border:1px solid red; 
        background:#FF6;
        position:absolute;
        padding:1px;
        color:#333;
        display:none;
    }
    </style>
    </head>
    <body>
    <div id="link">
        <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>
    </div>
    </body>
    </html>

    title属性:
      使用 title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。

    <a href="http://www.baidu.cn" title = "百度的的中文站点">百度网站</a>

      如果希望注释多行显示,可以使用 &#10; 作为换行符。

    <a href="http://www.baidu.cn" title = "百度的&#10;中文站点">百度网站</a>
  • 相关阅读:
    禁止鼠标多次点击选中div中的文字
    深入浅出 Nodejs 学习笔记 1
    svn 树冲突
    nodejs 按行读取 readline
    git版本控制器的基本使用
    规范javascript书写
    media query
    软件工程
    The sixth day
    The fifth day
  • 原文地址:https://www.cnblogs.com/goloving/p/7161345.html
Copyright © 2011-2022 走看看