鼠标移入显示移出隐藏及反复闪烁问题

html代码

<!--prev 和 next 是需要移入显示移出隐藏区域 --><div id="prev"></div><div id="next"></div><!--play是鼠标移入移出区域 --><div id="play"><ul><li style="display: block;"><img alt="" src="../../assets/photowall/1.gif"/></li><li><img alt="" src="../../assets/photowall/1.gif"/></li><li><img alt="" src="../../assets/photowall/1.gif"/></li><li><img alt="" src="../../assets/photowall/1.gif"/></li><li><img alt="" src="../../assets/photowall/1.gif"/></li></ul></div>

js代码

const oPlay = document.getElementById('play');const oPrev = document.getElementById('prev');const oNext = document.getElementById('next');oPlay.onmouseover = function () {oPrev.style.display = 'block';oNext.style.display = 'block';}oPlay.onmouseout = function () {oPrev.style.display = 'none';oNext.style.display = 'none';}

css代码

#prev {...display: none;...}#next {...display: none;...}

当两个 div 是独立的不相互关联的时候，鼠标移入会疯狂闪烁（ 一直在显隐之间徘徊）

解决方法是将要显隐的区域做为鼠标移入区域的一部分

<!--play是鼠标移入移出区域 --><div id="play"><!--prev 和 next 是需要移入显示移出隐藏区域 --><div id="prev"></div><div id="next"></div><ul><li style="display: block;"><img alt="" src="../../assets/photowall/1.gif"/></li><li><img alt="" src="../../assets/photowall/1.gif"/></li><li><img alt="" src="../../assets/photowall/1.gif"/></li><li><img alt="" src="../../assets/photowall/1.gif"/></li><li><img alt="" src="../../assets/photowall/1.gif"/></li></ul></div>