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>