欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

如何快速提示title的内容？

程序员文章站 2022-04-02 07:49:31
如何快速提示title的内容？

如何快速提示title的内容？

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8">    
<title>demo(快速提示title的内容)</title>    
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>    
<style>  
*{margin: 0;padding: 0;border:0;}  
body {  
    font-family: "Microsoft YaHei", Helvetica, arial, freesans, clean, sans-serif !important;  
    font-size: 12px;  
    line-height: 1.62;  
    color: #333;  
    height:100%;  
    _height:100%;  
    width:100%;   
    min-width: 1200px;   
    background:#fff;  
    font-weight:normal;  
    font-style:normal;   
}  
a,a * { cursor:pointer;background: #ccc;}  
.dd{  
    width: 200px;border: 2px dotted #666;height: 200px;background: #ccc;text-align: center;line-height: 200px;margin: 0 auto;border-radius: 5%;  
}  
#tooltip{  
    position:absolute;  
    border:1px solid #666;  
    background:#ccc;  
    color:black;  
    width:100px;   
    padding: 2px;  
    font-size: 12px;  
    line-height: 20px;  
    max-height:100px;  
    border-radius: 5px;  
    overflow: hidden;  
}  
  
</style>    
<script type="text/javascript">    
$(function(){    
    //var x = y = 20;//设定x=y=20的目的是防止鼠标移动误出发e.pageY+y,e.pageX+x    
    $("[title]").mouseover(function(e){    
        this.myTitle = this.title;    
        this.title = ""; //消除自身title的影响    
        var tooltip = "<p id='tooltip'>查看: "+ this.myTitle +"</p>"; //创建 p 元素 文字提示    
        $(".tooltip").append(tooltip);  //把它追加到文档中 $(".tooltip")可以改成$(this)   
        $("#tooltip")    
            .css({    
                "top": (e.pageY+20) + "px",    
                "left": (e.pageX+20)  + "px"    
            });      //设置x坐标和y坐标    
    }).mouseout(function(){         
        this.title = this.myTitle;    
        $("#tooltip").remove();   //移除     
    }).mousemove(function(e){    
        $("#tooltip")    
            .css({    
                "top": (e.pageY+20) + "px",    
                "left": (e.pageX+20)  + "px"    
            });    
    });   
})    
</script>    
</head>    
<body>    
<p class="dd"><a href="javascript：;" class="tooltip" title="快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示">快速    提示</a></p><!-- &nbsp;&nbsp;&nbsp; -->   
   
</body>    
</html>

上一篇： 谷歌与英国*协商推广无人驾驶汽车

下一篇： 谷歌与英国*会面商议无人驾驶汽车

推荐阅读