简单文本悬浮div提示效果 

<html>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $("a").each(function() {
                $(this).mouseover(function() {

                    $(this).next("div").css("left", function() {
                        return $(this).prev("a").offset().left - $(this).width();
                    });
                    $(this).next("div").css("top", function() {
                        return $(this).prev("a").offset().top;
                    })

                    var str = "";
                    str += "<div style='color:red;'><ul style='width:100%; margin-left:0;'><li style='float:left; width:50%;'>11</li><li style='float:left; width:30%;'>33</li><li style='float:left; width:15%;'>55</li></ul></div/>";
                    str += "<div style='color:blue;'><ul style='width:100%; margin-left:0;'><li style='float:left; width:50%;'>22</li><li style='float:left; width:30%;'>44</li><li style='float:left; width:15%;'>66</li></ul></div/>";
                    $("a").each(function() {
                        $(this).next("div").html(str);
                    });
                    
                    $(this).next("div").toggle();
                });
                
                $(this).mouseout(function() {                    
                    var id = $(this).prev("input[type='hidden']").prev("input[type='hidden']").val();
                    $(this).next("div").toggle();
                });

            });
        });
    </script>
</head>
<body>
<div>
    <div style="width:900px;float:left;">
        test tooltip
    </div>
    <div style="float:left;">
        <table>
            <tr><td>
                <a>1111111</a>
                <div style="position: absolute; top: 200; left: 300; display: none; width: 560; height: auto;
                    background-color: yellow; color: Black; border: solid  black  1px;" id="floatDIV">
                </div>
            </td></tr>
            <tr><td>
                <a>2222222</a>
                <div style="position: absolute; top: 200; left: 300; display: none; width: 560; height: auto;
                    background-color: yellow; color: Black; border: solid  black  1px;" id="floatDIV">
                </div>
            </td></tr>
        </table>
        
        
    </div>
</div>
</body>
</html>

posted @ 2015-11-05 10:08  枫轻  阅读(1248)  评论(0)  编辑  收藏  举报