html 鼠标mouseover信息提示事件

- 日理万妓 2022-04-03 04:00 590阅读 0赞

一、使用背景：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页面中提示信息框：

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

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页面中使用实例：

六、使用效果：

![20181220133414671.png][]

[20181220133414671.png]: /images/20220403/3b66e9c4ff7741b1a37860d51614d6a6.png