html 鼠标mouseover信息提示事件

一、使用背景：html页面中当鼠标指针位于元素上方时，弹出提示信息；

二、添加弹出信息样式：

<style>

 .pop-box {
        z-index: 9999999999999999; /*这个数值要足够大，才能够显示在最上层*/
        margin-bottom: 2px;
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0.7;
        background-color: #000;
    }

    .pop-box-body {
        clear: both;
        margin: 2px;
        padding: 2px;
        background-color: #000;
    }

    #divCover {
        position: fixed;
        z-index: 9999;
        top: 0px;
        left: 0px;
        display: none;
        width: 100%;
        height: 100%;
        opacity: 0.7;
        background-color: #000;
    }

</style>

三、HTML页面中提示信息框：

<div id="TitleInfo" class='pop-box' style='min-height: 20px; max-height: 40px; overflow-y: hidden; overflow-x: auto; padding:5px; '>
    </div>

四、弹出框显示和隐藏脚本：

<script>
    function popupDiv(obj, msg) {
        var offset = $(obj).offset();
        var html = "";

        if (msg != "") {
            html += "<span style='color:white;'>" + msg + "</span>";

            $("#TitleInfo").html(html);
            var x = offset.top;
            var y = offset.left;

            var div_obj = $("#TitleInfo").show();
            div_obj.css({ "top": $(obj).prop("offsetHeight") + x, "left": $(obj).prop("offsetWidth") + y });

            $("#divCover").show();
        }
    }

    function hidePopWin() {
        $("#divCover").hide();
        $("#TitleInfo").empty().hide();
    }
</script>

五、html页面中使用实例：

<span style="float: left; margin-top: 5px; cursor: pointer;" οnclick="setCheckBox('chkMyjob')" οnmοuseοver="popupDiv(this, '勾选此项，任务列表只显示我需要处理的表单任务');" οnmοuseοut="hidePopWin();">我的工作</span>

六、使用效果：

最后

以上就是义气皮皮虾为你收集整理的html 鼠标mouseover信息提示事件的全部内容，希望文章能够帮你解决html 鼠标mouseover信息提示事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。