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

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>