我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了.
<a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a>
然而这个提示效果的响应速度是挺缓慢的.考虑到良好的用户体验, 需要的是当鼠标移动到超链接的那一瞬间就出现提示. 这时就需要移除<a>标签title的提示效果.
实现这个效果具体思路如下:
a.当鼠标滑入超链接.=====mouseover事件
b.创建一个<div>元素, <div>元素内容为title属性的值. ======append追加内容
c.为它设置 x 坐标和 y坐标, 使其显示在鼠标位置的旁边.======绝对定位 e.pageY e.pageX
d.当鼠标划出超链接, 移除<div>元素.======remove
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{margin:0;padding:40px;background-color:#FFF;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;}
p{clear:both;margin:0;padding:.5em 0;}
#tooltip{position:absolute;border:1px solid #333;background-color:#F7F5D1;padding:1px;color:#333;display:none;}
</style>
</head>
<body>
<p><a href="#" class="tooltip" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a></p>
<p><a href="#" class="tooltip" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a></p>
<p><a href="#" class="tooltip" title="陈红母亲股权变更签名鉴定为假 涉提交虚假材料">陈红母亲股权变更签名鉴定为假 涉提交虚假材料</a></p>
<p><a href="#" class="tooltip" title="两女子因问路未获回应围殴保洁员(图)">两女子因问路未获回应围殴保洁员(图)</a></p>
<hr>下面浏览器自带超链接title提示<hr>
<p><a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a><p>
<p><a href="#" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a><p>
<script type="text/javascript" src="js/jquery-1-8-3.js"></script>
<script type="text/javascript">
(function($){
//自制提示和鼠标距离太近,有时候会引起无法提示的问题,需要重新设置提示元素的 top 和 left 值.
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
//显示title
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>";//创建<div>元素
$("body").append(tooltip);//把div追加到文档中
$("#tooltip")
.css({
"top": ( e.pageY + y ) + "px",
"left": ( e.pageX + x ) + "px" //设置x坐标和y坐标, 并且显示
}).show("fast"); }).mouseout(function() {
//隐藏title
this.title = this.myTitle;
$("#tooltip").remove();
});
})(jQuery);
</script>
</body>
</html>
效果如下:
aaarticlea/png;base64,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" alt="" width="309" height="197" />
彩色点代表鼠标指针.
此时,鼠标滑入和滑出已经没有问题.当鼠标在超链接上面移动, 提示效果并不会随着鼠标移动. 还需要添加一个mousemove事件.
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{margin:0;padding:40px;background-color:#FFF;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;}
p{clear:both;margin:0;padding:.5em 0;}
#tooltip{position:absolute;border:1px solid #333;background-color:#F7F5D1;padding:1px;color:#333;display:none;}
</style>
</head>
<body>
<p><a href="#" class="tooltip" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a></p>
<p><a href="#" class="tooltip" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a></p>
<p><a href="#" class="tooltip" title="陈红母亲股权变更签名鉴定为假 涉提交虚假材料">陈红母亲股权变更签名鉴定为假 涉提交虚假材料</a></p>
<p><a href="#" class="tooltip" title="两女子因问路未获回应围殴保洁员(图)">两女子因问路未获回应围殴保洁员(图)</a></p>
<hr>下面浏览器自带超链接title提示<hr>
<p><a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a><p>
<p><a href="#" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a><p>
<script type="text/javascript" src="js/jquery-1-8-3.js"></script>
<script type="text/javascript">
(function($){
//自制提示和鼠标距离太近,有时候会引起无法提示的问题,需要重新设置提示元素的 top 和 left 值.
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
//显示title
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>";//创建<div>元素
$("body").append(tooltip);//把div追加到文档中
$("#tooltip")
.css({
"top": ( e.pageY + y ) + "px",
"left": ( e.pageX + x ) + "px" //设置x坐标和y坐标, 并且显示
}).show("fast"); }).mouseout(function() {
//隐藏title
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({
"top": ( e.pageY + y ) + "px",
"left": ( e.pageX + x ) + "px"
});
});
})(jQuery);
</script>
</body>
</html>