<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
ul li{ list-style:none;}
img {border:0 none;}
body {padding:100px;}
.tooltip{position:absolute;display:none;border:1px solid #333; border-radius:8px; box-shadow:0 0 3px rgba(000,000,000,0.8);background:rgba(247,245,209,0.5);padding:3px;color:#333;display:none;}/* border-radius，box-shadow ie9以下都不兼容 */
</style>
<div class="test">
<a href="#" class="link" title="这是我的超链接提这是我的超<br>
<strong>链接</strong>提这是我的超链接提这是<img src='img/loading.gif'>我的超<br>
链接提这是我的超链接提这是我的超链接提示1.">自定义链接提示</a>
<a href="#" class="link">默认title提示</a>
<a href="#" class="link" title="自定义TITLE提示2222！！！！">自定义链接提示</a>
<a href="#" title="原始链接TITLE提示！">原始链接title提示</a> </div>
</body>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var x=10;
var y=20;
$(".link").mouseover(function(e){
//alert(e.pageX);
if(typeof($(this).attr('title'))!='undefined'){ // 判断标签中是否有定义title属性
this.my_tit=this.title;
this.title='';
var tooltip="<div class='tooltip'>"+this.my_tit+"</div>";
$("body").append(tooltip);
$(".tooltip").css({
display:'block',
left: e.pageX+x,
top: e.pageY+y
})
};
}).mouseout(function(){
if(typeof($(this).attr('title'))!='undefined'){
this.title=this.my_tit;
$(".tooltip").remove();
};
}).mousemove(function(e){// 鼠标移动时跟随
$(".tooltip").css({
left: e.pageX+x,
top: e.pageY+y
})
})
});
</script>
</html>
效果图：
相关推荐
超链接提示效果的实现主要依赖于jQuery的选择器和事件处理。在给出的代码示例中，`$("a.tooltip")`选择具有`tooltip`类的所有超链接。`mouseover`事件触发时，首先存储当前超链接的`title`属性值到`myTitle`变量，...
**基于jQuery的超链接提示插件——niceTitle详解** 在网页设计中，为了提供更好的用户体验，超链接往往需要提供额外的信息来帮助用户了解点击后会跳转到哪里。`niceTitle`是一个基于jQuery的插件，它允许在鼠标悬停...
- **知识点**：艺术字是一种具有特殊效果的文字形式，常用于网页标题或重要提示信息。 - **操作步骤**： - 在表格的第一个单元格中插入文本“信息技术课程”。 - 选中该文本，点击工具栏中的“艺术字”按钮，选择...
// 如果没有数据，添加一行提示信息 $('table tbody').prepend('<tr><td colspan="2">暂无数据</td></tr>'); break; case '1': // 遍历服务器返回的数据，为每个数据项创建一个新的tr $.each(data.data, ...
当iOS用户访问带有此标签的网页时，如果他们安装了对应的应用，系统会弹出提示，否则不会显示任何特殊提示。需要注意的是，这种方法并不适用于Android设备。 **总结** 以上三种方法各有优缺点，适用于不同的场景。...
如果文件是JavaScript文件，则应该以.js为后缀，如果是jQuery相关的文件，则可能以.jq作为后缀。 创建HTML文件之后，我们可以通过快捷键快速生成基础的HTML模板。在VSCode中输入“!”然后按下回车键，通常就会自动...
在给定的标题和描述中，我们看到如何使用 jQuery 为 HTML 中的 `<a>`（超链接）标签绑定 `click` 事件。下面将详细讲解这个过程，以及涉及到的相关知识点。 首先，jQuery 的 `$` 符号是其库的简写形式，它用于选择...
为了实现这些，可以使用jQuery的定时器函数`setInterval`来定时切换图片，使用CSS3的过渡效果增强用户体验，或者添加工具提示插件以显示图片的`title`属性。 总结起来，jQuery焦点图的实现涉及以下几个关键知识点：...