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>