我已经不想说明自己是有多傻,多傻,多傻。明明一个已经提示过的问题,自己又在哪里纠结了一个小时,原谅我最近愁思万千,已经昏了头。
其实就是一个很简单的小案例,
使用jquery库模拟超链接的提示的功能。
思路很简单:
$(function () {
// 1.给a标签注册一个鼠标划过事件(当鼠标一经过的时候就显示提示div),
// 一个鼠标离开事件(离开以后就隐藏或则移出div),一个鼠标移动事件(当你的鼠标再超链接上移动的时候
// ,提示内容也得跟着你的鼠标移动不是吗?要是不移动那岂不是太奇怪了, 你说类?)。
// 2.鼠标划过事件
// 2.1我们要先获取a标签
// 2.2给获取到的a标签注册mouseover事件
$("a.tooltip").mouseover(function (e) {
// 2.3我们要动态的创建一个div,并把a标签的title属相添加到div上面去
var tooltip="<div id='totp'>"+this.title+"</div>";
// 2.4把创建的div添加到body中(因为你动态添加的标签她只是存在于内存中,
// 你必须手动添加到dom树上,才能对他进行操作(你想怎么做就怎么做你懂的,呵呵,我又邪恶了。))
$("body").append(tooltip);
// 2.5获取到该div对他进行样式设置,因为要跟随鼠标,
// 所以要设置div的位置(一定要记住,div必须定位才能给他设置top,left,否则不生效)
$("#totp").css({
"top": e.pageY + "px",
"left": e.pageX + "px"}).show("fast");
})
// 3.鼠标离开事件(因为jquery提供的链式机制,所以可以这样子继续注册)
.mouseout(function () {
// 3.1把我们创建的div移出
$("#totp").remove();
})
// 4.鼠标移动事件
.mousemove(function (e) {
$("#totp").css({
"top": e.pageY + "px",
"left": e.pageX + "px"
})
});
});
是不是觉得这样子就完美了,就可以完成任务了?梦想是美好的,但是现实是骨敢的,这样子会出问题。
出现问题:
1.当你自己的div显示了以后,你一会人家a标签默认的提示就显示,我去,是不是很尴尬,所以我们的想办法去除。
2.因为div设置的距离就是鼠标的位置,由于鼠标焦点的变化引起鼠标离开事件,会导致你的鼠标不停的闪啊,闪啊,div一会出现一会消失(其实是因为,你给你的a标签设置移动上去的时候,显示div,离开a标签的时候,div不显示,如果把div的位置设置成鼠标的位置,那么当div出来后,鼠标其实就是点击的div,已经离开a标签,当离开a标签,div消失掉了,鼠标又点在a标签上了,div又出现了。如此反复就会出现div,鼠标闪啊,闪的效果,好吧是不是把你们说晕了,自己慢慢体会把。xixi。)
解决方案:
1.a标签显示提示信息是因为设置了title属性,所以我们在鼠标划过的事件上,把title属性置空就好。
2.我们不让div的位置就是鼠标的位置,我们可以往下,往右点,让鼠标点不到他。
完整代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src=jquery-1.12.2.min.js></script>
<style>
#totp{
position: absolute;
border: 1px solid #333;
background: pink;
}
</style>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的提示a">这是我的提示a</a></p>
<p><a href="#" class="tooltip" title="这是我的提示b">这是我的提示b</a></p>
<p><a href="#" title="这是提示a">这是提示a</a></p>
<p><a href="#" title="这是提示b">这是提示a</a></p>
</body>
<script>
$(function () {
2.机智的设置个偏移的坐标值
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
1.我们把title值保存起来,然后再清空,因为我们鼠标离开的时候还要给人家送回去。
this.mytitle=this.title;
this.title="";
var tooltip="<div id='totp'>"+this.mytitle+"</div>";
$("body").append(tooltip);
$("#totp").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"}).show("fast");
})
.mouseout(function () {
this.title=this.mytitle;
$("#totp").remove();
}).mousemove(function (e) {
$("#totp").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
})
});
});
</script>
</html>
其实这个功能很常见了,为何博主还要记录呢,我是想提醒自己犯下的愚昧的错误。可怜的博主的1个小时。