zoukankan      html  css  js  c++  java
  • 鼠标经过显示层,移出隐藏层

    鼠标经过显示层,鼠标移出后隐藏层,这种情况是非常常见的。假如有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;}




  • 相关阅读:
    vim 高级功能
    Vim高手,从来不用鼠标2——替换、撤销、缩进、查找
    Vim高手,从来不用鼠标
    zookeeper的leader选举机制个人总结
    【JVM】GC之垃圾收集算法
    【软件工程】常见的几种软件过程模型的比较
    【设计模式】适配器模式
    【计算机网络】网络的硬件构成要素
    【计算机网络】ISO/OSI 网络体系结构
    【Spring Cloud】Spring Cloud Config 实现分布式配置中心
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356375.html
Copyright © 2011-2022 走看看