基于Jquery的鼠标经过显示区域(tips)效果

本效果是基于sohtanaka所更改，在其基础上处理了一个IE6－8的JS报错。素材来源于：http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/

演示地址：http://www.Joomla178.com/download/Front-end/base-jquery-mousemove-show-div/index.html

下载地址：http://www.Joomla178.com/download/file/23-base-jquery-mousemove-show-div.html

不过sohtanaka的素材，在IE下会有tip未定义的提示，当然为了追求完美，要把提示去掉的话，本站的演示即是正确的，修改方法如下：

原方法：

$(document).ready(function() {
 //鼠标经过显示区域(tips)效果
 $(".tip_trigger").hover(function(){
 tip = $(this).find('.tip');
 tip.show(); //调用jquery方法显示tips
 }, function() {
 tip.hide(); //调用jquery方法隐藏tips        
 }).mousemove(function(e) {
 var mousex = e.pageX + 20; //获取X轴坐标
 var mousey = e.pageY -10; //获取Y轴坐标
 var tipWidth = tip.width(); //给tips一个宽度
 var tipHeight = tip.height(); //给tips一个高度
 
 var tipVisX = $(window).width() - (mousex + tipWidth);
 var tipVisY = $(window).height() - (mousey + tipHeight);
 
 if ( tipVisX < 20 ) {
 mousex = e.pageX - tipWidth - 20;
 } if ( tipVisY < 20 ) {
 mousey = e.pageY - tipHeight - 20;
 } 
 tip.css({  top: mousey, left: mousex });
 });
});

改为

$(document).ready(function() {
 //鼠标经过显示区域(tips)效果
var tip = $(this);//添加本行代码去除IE下提示tip未定义
 $(".tip_trigger").hover(function(){
 tip = $(this).find('.tip');
 tip.show(); //调用jquery方法显示tips
 }, function() {
 tip.hide(); //调用jquery方法隐藏tips        
 }).mousemove(function(e) {
 var mousex = e.pageX + 20; //获取X轴坐标
 var mousey = e.pageY -10; //获取Y轴坐标
 var tipWidth = tip.width(); //给tips一个宽度
 var tipHeight = tip.height(); //给tips一个高度
 
 var tipVisX = $(window).width() - (mousex + tipWidth);
 var tipVisY = $(window).height() - (mousey + tipHeight);
 
 if ( tipVisX < 20 ) {
 mousex = e.pageX - tipWidth - 20;
 } if ( tipVisY < 20 ) {
 mousey = e.pageY - tipHeight - 20;
 } 
 tip.css({  top: mousey, left: mousex });
 });
 });