简单文本悬浮div提示效果

最新推荐文章于 2022-03-18 17:19:55 发布

weixin_30662539

最新推荐文章于 2022-03-18 17:19:55 发布

阅读量413

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/linxianfeng/p/4938560.html

本文介绍了一种使用jQuery实现鼠标悬停触发下拉菜单动态加载内容的技术，包括事件绑定、位置计算和内容生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>