鼠标经过显示层，移出隐藏层

鼠标经过显示层，鼠标移出后隐藏层，这种情况是非常常见的。假如有2个层：一个是内容层cont（默认显示），一个是提示层tip（默认隐藏）。当鼠标经过cont的时候tip显示，但当鼠标进入tip的时候（这时候鼠标已经移出cont），还要保证tip是显示。然后鼠标移出tip或移出cont（没有进入tip）的时候，tip层隐藏。

js代码

function tip(overClass, tipClass){
function getEvent(event){//获取事件对象
return event ? event : window.event;
}
function getRelatedTarget(event){//获取相关对象
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
var overArray = getElementsByClass(overClass),
tipArray = getElementsByClass(tipClass),
len = overArray.length;
for (var i = 0; i < len; i++){(function(i){
overArray[i].onmouseover = function(){//鼠标经过
tipArray[i].style.display = 'block';
}
overArray[i].onmouseout = function(event){//鼠标移出经过区
event = getEvent(event);
var relatedTarget = getRelatedTarget(event);
if (relatedTarget.className == tipClass){
tipArray[i].style.display = 'block';
}else{
tipArray[i].style.display = 'none';
}
}
tipArray[i].onmousemove = function(){//鼠标移动tip区
tipArray[i].style.display = 'block';
}
tipArray[i].onmouseout = function(){//鼠标移出tip区
tipArray[i].style.display = 'none';
}
})(i)
}
}
tip('hover', 'tip');

使用说明：函数tip的2个参数，
overClass：鼠标经过区（比如按钮）的样式类名；
tipClass：提示区样式类名。

html代码：

<div class="wrap">
<ul class="over_ul">
<li class="hover">第一个</li>
<li class="hover">第二个</li>
<li class="hover">第三个</li>
</ul>
<div class="tip" id="tip1"><div><div><a href="http://bianyuan.me" target="_blank">第一个提示内容</a></div></div></div>
<div class="tip" id="tip2"><span>第二个提示内容</span></div>
<div class="tip" id="tip3">第三个提示内容</div>
</div>

css代码：

div,ul,li{ margin:0; padding:0;}
.wrap{ position:relative; width:1002px; margin:0 auto; padding-top:20px;}
.over_ul{ overflow:hidden; list-style:none;}
.over_ul li{ float:left; width:100px; height:25px; line-height:25px; background-color:#CCC; border:1px solid #999; text-align:center;}
#tip1,#tip2,#tip3{ display:none; position:absolute; width:100px; height:60px; background-color:#060; font:bold 14px "宋体"; color:#fff; top:44px;}
#tip1{ left:0px;}
#tip2{ left:102px;}
#tip3{ left:204px;}