鼠标悬浮图片出现蒙层，移开蒙层消失样式

鼠标悬浮在图片上出现蒙层样式。用到jQuery的mouseover和mouseleave方法，不能用mouseover和mouseout两个方法配合，会有闪烁情况，那是浏览器发生冒泡行为。

具体思路如下，鼠标悬浮动态给图片增加一个兄弟节点div，给这个div使用相对定位将位置移动到图片上。鼠标移开删除那个生成的div即可。

$(document).on("mouseover",".addimg",function(){$(this).after("<div class='mousehovers' style='background: rgba(0,0,0,0.6);width:110px;height:80px;position:relative;top:-80px;text-align:center;clear:both;color:white;cursor:pointer;padding-top: 30px;'>更换</div>");
})
$(document).on("mouseleave",".daohangdiv",function(){$(".mousehovers").remove();
})

1.因为img是动态生成的，所以用$(document).on（）把指定的事件绑定在生成的元素上。
2.addimg是图片的class名称，daohangdiv是div的父级div元素class名，之所以mouseover和mouseleave没有绑定同一元素，是因为绑定同一元素一定会使浏览器发生冒泡行为。由于浏览器的冒泡行为。造成如果在一个DIV元素上同时定义了mouseover,mouseleave的时候，当鼠标移动到DIV中的child子元素的时候，就会同时执行了两个操作mouseover和mouseout。所以会出现闪烁的问题。
网上的解决方案有说是做延时执行，其实不需要绑定同一个元素就可以了，mouseover绑定当前元素，mouseleave绑定父级元素即可解决此问题。