鼠标悬停帮助图标显示文字提示框代码

最新推荐文章于 2024-07-07 15:27:44 发布

lixiangTrad

最新推荐文章于 2024-07-07 15:27:44 发布

阅读量2.2k

点赞数

分类专栏： css 文章标签： css 帮助按钮悬停显示文字特效

本文链接：https://blog.csdn.net/lixiangTrad/article/details/93205506

版权

本文介绍如何使用CSS实现一个功能，当鼠标悬停在帮助图标上时，显示文字提示框。该效果可以增强用户体验，提供清晰的操作指导。

摘要由CSDN通过智能技术生成

<style type="text/css">
    .help-tip {
        cursor:pointer;
        text-align: left;
        font-size: 14px;
        background-color: #FFFF80;
        padding-top: 5px;
        padding-left: 10px;
    }
</style>

<i class="fa fa-question-circle" οnmοuseοver="onmouseover_help(this,event)" οnmοuseοut="onmouseout_help(this)" ></i>

<div id="help1" style="display:none;position:absolute;z-index:1;" class = "help-tip"></div>

function onmouseover_help(ele,event){
    var x,y;
    x = event.clientX + 10;
    y = event.clientY + 10;
    document.getElementById("help1").innerHTML = "<div class=''>说明：</br>1.应检人