e.pageX和e.pageY鼠标提示JS

浏览数：19 / 时间：2015年06月09日

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>e.pageX和e.pageY鼠标提示JS</title>	
    
<script type="text/javascript" src="http://mobile.yesky.com/fashion/js/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
				$(".tooltip").each(function(i){
					$(this).mouseover(function(e) {
							var tooltip = "<div id='tip'>" + $(".tooltip").eq(i).attr("text") + "</div>";
							$("body").append(tooltip);
							$("#tip").css({
									'position': 'absolute',
									'padding':'5px',
									'font-size':'12px',
									'top': e.pageY,
									'left': e.pageX,
									'background': 'silver'
							}).show("fast")
					}).mouseout(function() {
							$("#tip").remove()
					})
					
				})
		})
	</script>

</head>
  
<body>
	<p class="tooltip" text="e.pageX和e.pageY鼠标提示1">提示1</p>
    <p class="tooltip" text="e.pageX和e.pageY鼠标提示2">提示2</p>
    <p title="鼠标提示3">提示3</p>
    <p title="鼠标提示4">提示4</p>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。