• jquery鼠标放上去显示悬浮层即弹出定位的div层


    <div><a id="a1" onmouseover="javascript:show('a1','div1');" onmouseout="hide('div1')">鼠标放上去1</a></div>
    <div id="div1" onmouseover="javascript:show('a1','div1');" onmouseout="hide('div1')" style="display: none;  218px; font-size: 12px; color: #333; border: 1px solid #FF6600; border-top: none; margin: 0px; background-color: #fff; position: absolute">
        <ul>
            <li><a href="#">运动</a></li>
            <li><a href="#">钟表</a></li>
            <li><a href="#">男装</a></li>
            <li><a href="#">钻石饰品</a></li>
            <li><a href="#">女装</a></li>
            <li><a href="#">金银投资</a></li>
        </ul>
    </div>
    
    <script>
        var ishide = 0;//判断是否需要隐藏div
        function show(id1, id2) {
            var obj1 = $("#" + id1 + "");
            var obj2 = $("#" + id2 + "");
            if (ishide == 0) {
                ishide = 1;
            }
            $(obj2).css("display", "block");
    
            //var X = obj1.offset().top;
            //var Y = obj1.offset().left;
            //$(obj2).offset({ top: X + 20, left: Y }) 
            //$(obj2).css("left", X);
            //$(obj2).css("top", Y + 10);
        }
        function hide(id2) {
            ishide = 0;
            setTimeout(hide2, 400, id2);
        }
        function hide2(id2) {
            var obj2 = $("#" + id2 + "");
            if (ishide == 0) {
                $(obj2).css("display", "none");
            }
        }
    </script>
    

    <script language="javascript" src="jquery-1.4.2.min.js"></script>
    <script>
    function show(obj,id) {
    var objDiv = $("#"+id+"");
    $(objDiv).css("display","block");
    $(objDiv).css("left", event.clientX);
    $(objDiv).css("top", event.clientY + 10);
    }
    function hide(obj,id) {
    var objDiv = $("#"+id+"");
    $(objDiv).css("display", "none");
    }
    </script>

    <!--http://www.ablanxue.com/prone_3421_1.html-->

    <div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;">
    提示1效果
    </div>
    <div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;">
    提示2效果
    </div>

    <a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>
    <br><br><br><br><br>
    <a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a>

  • 相关阅读:
    sql server identity限制
    基于JQUERY的WEB在线流程图设计器GOOFLOW 0.5版
    windows internal读书笔记
    获取异常的具体出处——dbms_utility.format_error_backtrace
    FORM个性化——调用报表
    接口表GL_INTERFACE中的字段STATUS表示的含义
    数据结构——java Queue类
    数据结构——Java Stack 类
    用cmd运行java可以javac不行(win10)
    Spring配置数据源的三种方法
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/10523844.html
Copyright © 2020-2023  润新知