简单的悬浮框（提示框）功能实现

简单的悬浮框（提示框）功能实现（HTML+CSS+JQuery）

本篇记录了原生简单的HTML+CSS+JQuery实现悬浮框（提示框）的功能

HTML部分

<input onMouseOver="showInform(this,event);" onMouseOut="hiddenInform(this)" />

CSS部分

.inform {
            position: absolute;
            display: block;
            width: 350px;
            /* background-color: #E0E5E5; */
            background-color: white;
            overflow: auto;
            /* 自动添加滚动条 */
            box-shadow: 0px 0px 10px #000;
            /* 外阴影 */
            border-radius: 5px;
            padding: 5px;
        }

JQuery部分

//显示悬浮层
    function showInform(obj, event) {
        var x = event.clientX;
        var y = event.clientY;
        if (obj.value !== '') {
            var htmlDiv = "<div class='inform' id='" + obj.id + "_divTip' style='left:" + x + "px;top:" + y + "px'>" + obj.value + "</div>"
            $(obj).parent().append(htmlDiv);
        }
    }
    //隐藏悬浮层
    function hiddenInform(obj) {
        $("#" + obj.id + "_divTip").remove();
    }