前端 鼠标悬停事件 是否显示提示框 onmouseover onmouseout

1，效果图

2，描述

当我鼠标悬停在【问号】标记位置时，名词解释提示框就会出现

3，代码

<div class="lineb biao0">
   <div class="layui-row " id="zbinfo" name="zbinfo">
		// 动态样式位置
    </div>
</div>


//动态数据加载
  $.post("/**/getzblist",postdata,function(data){
      if (data.success) {
           $('#zbinfo').empty() //清空样式
           $.each(data.list, function (index, item) {
           //数据样式插入
               $('#zbinfo').append("<div class='layui-col-md2 '>" +
                   "<div class='selectCard ' οnclick='enterzb(\""+item.zbname+"\",\""+item.zbcode+"\",\""+item.zburl+"\")'>" +
                   "<img class='iconImg'  src='../../static/img/icon.png' alt='' id='imagemouse_"+item.zbcode+"' οnmοuseοver='temptip(\""+item.zbcode+"\",\""+item.bz+"\")' " +
                   "οnmοuseοut='normalImg()'>" +item.zbname
                   +"<br>"+item.num+
                   "</div></div>");
                //动态设置宽度
               document.getElementsByClassName('layui-col-md2')[index].style.width =data.width;
              
           });
       }else{
           dLong.layerMsg(data.msg)
       }
   },true);


//鼠标离开，提示框关闭
    function normalImg(){
        // document.getElementById("dis_"+zbcode).style.display = "none";
        layer.closeAll('tips');
    }

//鼠标移到，提示框显示并设置提示框样式
    function temptip(zbcode,bz) {
        layer.tips('<div style="color:#757575;width: 160px;height: 80px;">'+bz+'</div>','#imagemouse_'+zbcode,{
            tips:[2,"#FFFFFF"],
            time:0
        });
    }

4，知识点：

layer.tips('提示信息', '#id', {
	tips: [3, '#0FA6D8'], //设置tips方向和颜色 类型：Number/Array，默认：2 tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
	tipsMore: false, //是否允许多个tips 类型：Boolean，默认：false 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
	time:2000 //2秒后销毁，还有其他的基础参数可以设置。。。。这里就不添加了
});