当前位置： 移动技术网 > IT编程>网页制作>CSS > 如何快速提示title的内容？

如何快速提示title的内容？

2018年03月12日  | 移动技术网IT编程  | 我要评论

如何快速提示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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网