关于 hover 时候闪烁的问题

实现功能：鼠标移入 div1 时显示 div2，移出是隐藏，两个 div 的位置关系是上下重叠。

 

问题：当两个 div 是独立的不相互关联的时候（特殊需求形成了如下布局，已简化），鼠标移入会疯狂闪烁（div2 一直在显隐之间徘徊） 

<div class="div1"></div>
<div class="div2"></div>

 

原因：鼠标移入，div2 显示，鼠标处在 div2 上，相当于移出 div1，所以 div2 隐藏；div2 隐藏之后，div1 暴露，鼠标又置于 div1 上，继续执行鼠标移入的行为；如此往复...闪烁

 

解决：div2 作为 div1 的一部分存在....

<div class="div1">
    <div class="div2"></div>
</div>