文字提示效果-显示和隐藏

来源：互联网发布：摄影师知乎编辑：程序博客网时间：2024/05/24 05:13

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript" src="js/jquery-1.6.4.min.js"></script><script type="text/javascript">$(document).ready(function(){var x = 10;var y = 20;$(".box").mouseover(function(e){var hdw = "<div id='two'>"+this.title+"</div>";$("body").append(hdw);$("#two").css({"left":(e.pageX+x)+"px","top":(e.pageY+y)+"px"}).show("fast");}).mouseout(function(){$("#two").remove();}).mousemove(function(e){$("#two").css({"left":(e.pageX+x)+"px","top":(e.pageY+y)+"px"});});});</script><style type="text/css">body { font:12px "宋体"; padding:100px; }#two { width:300px; border:1px solid #ccc; background:#eee;  line-height:30px;  position:absolute; padding:10px; display:none; border-radius:10px;}</style></head><body><a href="#" class="box" title="新浪、百度、IT行业">文字提示效果</a></body></html>

0 0