陋室铭
永远也不要停下学习的脚步(大道至简至易)

<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; width: 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>

posted on 2019-03-13 16:09  宏宇  阅读(924)  评论(0编辑  收藏  举报