AI 赋能应用,代码定义未来
用全新 AI 数字人・智能应用・重构数字体验服务

jquery模拟title提示效果

发表日期:2024-12-19 浏览次数:2701 来源:技术博客 编辑:SW

当文字字符长度被限制后,总有些长标题会被截断,用title提示虽简单但会造成页面html代码的冗余,这里用jquery做了一个模拟title的提示效果,具体代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery实现的简单文字提示效果</title>

<script src="http://www.phpernote.com/js/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

#pt_phpernote{

position:absolute;

border:1px solid #333;

background:#f7f5d1;

padding:2px;

color:#333;

display:none;

font-size:12px;

}

</style>

<script type="text/javascript">

$(function(){

    var x=10,y=20;

    $("a.pt").mouseover(function(e){

        $("body").append("<div id='pt_phpernote'>"+ this.text+"<\/div>");

        $("#pt_phpernote").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");

    }).mouseout(function(){

        $("#pt_phpernote").remove();

    }).mousemove(function(e){

        $("#pt_phpernote").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});

    });

})

</script>

</head>

<body>

<p><a href="#" class="pt">php cli下接受参数的几种方法</a></p>

</body>

</html>



本站软文为深正互联摘自权威资料,书籍,或网络文章,如有版权纠纷或违规,请即刻联系我们删除,我们欢迎您分享转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
填写电话 ≠ 打扰
只给您多一份选择,少一份顾虑
您可拨打以下电话联系我们技术总监
138 2888 4598
用心将技术和服务
遍布全中国乃至世界...
138-2888-4598
我们坚信无论您在哪里我们都能为您提供优质的服务!
请填写您的需求
您希望我们为您提供什么服务呢
数字人 AI应用 O2O电商 智联AioT APP开发 小程序开发 ERP/CRM系统开发 电脑系统开发
您的预算
3万-5万 5万-8万 8万-10万 10万-15万 15万以上