模拟title实现提示功能,完整代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>文字跟随鼠标</title> <meta name="viewport" content="width=device-width"/> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <div id="hint" style="position: absolute;padding:5px 10px;font-size:13px; border-radius:5px;background:rgba(91,91,91,0.6);color:#fff;display:none"></div> <div onmouseover="mytips(1,‘恭喜你,出来了!‘)" onmouseout="mytips(0)">点我DOM</div> <div onmouseover="mytips_jquery(1,‘我是Jquery,这个提示不错吧!‘)" onmouseout="mytips(0)">点我JQuery</div> <script type="text/javascript"> //提示跟随鼠标移动而移动功能 // DOM function mytips(isshow,words) { document.addEventListener("mousemove", function (e) { var myhint = document.getElementById("hint"); myhint.style.left = e.clientX + 8 + "px"; myhint.style.top = e.clientY + 2 + "px"; switch (isshow) { case 1: if(words){ myhint.innerHTML = words; } myhint.style.display = ‘block‘; break; case 0: myhint.style.display = ‘none‘; break; default: myhint.style.display = ‘none‘; break; } }); } // JQuery function mytips_jquery(isshow,words) { document.addEventListener("mousemove", function (e) { var myhint = $("#hint"); $(myhint).css({ "left": e.clientX + 8 + "px", "top": e.clientY + 2 + "px" }); switch (isshow) { case 1: if(words){ $(myhint).text(words); } $(myhint).css({"display": "block"}); break; case 0: $(myhint).css({"display": "block"}); break; default: $(myhint).css({"display": "none"}); break; } }); } </script> </body> </html>
原文:https://www.cnblogs.com/huangzhen22/p/12191703.html