Home > Article > Web Front-end > JS implements the link text prompt box effect that follows the mouse

JS implements the link text prompt box effect that follows the mouse

PHPzOriginal: 2016-05-16 15:46:411158browse

This article mainly introduces the JS implementation of the link text prompt box effect that follows the mouse, involving related techniques of javascript mouse events and page element style operations. It is very simple and practical. Friends who need it can refer to it. The details are as follows:

JavaScript and CSS are used here to achieve the link prompt effect. It will not change your original link structure. It is implemented using the original title tag of the link. If you used the title tag before, you almost only need to copy the JS code to Just go to your web page. You will find that after running this effect, if the mouse moves on the link, the text prompt box will move with the mouse.

The operation effect is shown in the figure below:

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>跟随鼠标的文字提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font:12px/1.8 arial;}
a,a:visited{color:#3366cc;text-decoration:none;}
a:hover{color:#f60;text-decoration:underline;}
.tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}
img{border:none;}
</style>
<script type="text/javascript">
 var tip={$:function(ele){
 if(typeof(ele)=="object")
  return ele;
 else if(typeof(ele)=="string"||typeof(ele)=="number")
  return document.getElementById(ele.toString());
  return null;
 },
 mousePos:function(e){
  var x,y;
  var e = e||window.event;
  return{x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
 },
 start:function(obj){
  var self = this;
  var t = self.$("mjs:tip");
  obj.onmousemove=function(e){
   var mouse = self.mousePos(e);
   t.style.left = mouse.x + 10 + &#39;px&#39;;
   t.style.top = mouse.y + 10 + &#39;px&#39;;
   t.innerHTML = obj.getAttribute("tips");
   t.style.display = &#39;&#39;;
  };
  obj.onmouseout=function(){
   t.style.display = &#39;none&#39;;
  };
 }
 }
</script>
</head>
<body>
<ol>
<li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="2013年12月14日，嫦娥3号卫星登上月球，激动人心的一切终于到来了……">中国嫦娥飞天的一些感想</a></li>
<li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="中国未来一定是世界上最强大的国家，你相信么？">中国是世界上最强大的国家</a></li>
</ol>
<p id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></p>
</body>
</html>

The above is the entire content of this chapter, more For related tutorials, please visit JavaScript Video Tutorial, CSS Video Tutorial!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of usage of string class in C_javascript skillsNext article：Summary of usage of string class in C_javascript skills

See more

JS implements the link text prompt box effect that follows the mouse

Related articles