日期:2014-05-17  浏览次数:20773 次

jquery+css小tip实现
看了这篇文章http://www.haozi.cn/?p=193,照着做了一个小样。
很简单,不过也很受启发,自己的css功底太差,应该要花点时间看看css的书籍。
以下是代码:
<style>
      .tip {display:none;position:absolute;z-index:9999;font-size:12px;padding:0 3px;
             border:1px solid #000;background-color:#ffc;}
 </style>

<div id="t">
  <span><a href="###">拉拉</a></span>
  <span><a href="###">圈圈</a></span>
 </div>
 <div id="tip" class="tip"></div>

<script language="JavaScript" src="js/jquery-min.js"></script>
<script language="JavaScript">
 $("#t a").mouseover(function(e){
	$("#tip").html($(this).text()).css({"left": e.pageX + 10 + "px", "top": e.pageY + 10 + "px"}).show();
 }).mouseout(function(){
	$("#tip").hide();
 });
</script>