鼠标悬浮事件

建议:建议使用jquery用法。
原因:原生js用onmouseover 和onmouseout ,假如你的div id为colorFlag下面存在子div id为flag,那么你给colorFlag加悬浮事件的时候,鼠标悬浮的时候会弹出2次,因为原生js会给子默认也加上,jquery的话就解决了这个问题,只需要你使用mouseenter和mouseleave,就不会出现这种问题

1、利用原生js实现鼠标悬浮事件

		var tip_index = 0;
		var oDiv = document.getElementById('colorFlag');
        // 鼠标划过事件
            oDiv.onmouseover = function (){
                // 3.事件处理程序
       			tip_index =layer.msg(excepetionData[j].error_msg)
            }

            // 鼠标移开事件
            oDiv.onmouseout = function (){
                // 3.事件处理程序
                   layer.close(tip_index);
            }

2、利用jquery实现鼠标悬浮事件

     		var tip_index = 0;
            $("#"+id1+'colorFlag').mouseenter(function(e){
            //这里的e可以拿到鼠标悬浮行的整行数据(e.currentTarge)
                tip_index =layer.tips('我是悬浮内容',"#"+id1+'colorFlag',{
                        // area:["200px","auto"],
                        tips:1,           // 在标签上面显示tips
                        time:100000     // 消失时间
                    })
                }

            });
            $("#"+id1+'colorFlag').mouseleave(function(){
                layer.close(tip_index);
            });

你可能感兴趣的:(javascript,jquery,前端)