解决onmouseover与onmouseout共存不断闪烁的问题

最新推荐文章于 2021-09-01 20:53:14 发布

原创最新推荐文章于 2021-09-01 20:53:14 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决网页中图片预览时出现闪烁现象的方法。通过调整显示层的CSS属性pointer-events为none，有效避免了鼠标悬停事件触发时元素的频繁显示与隐藏所导致的视觉闪烁问题。

onmouseover与onmouseout共存不断闪烁

<input id="sdqinfoimg" type="hidden" value="a.jpg"/>

<img src="a.jpg" height="100" onmouseover="showimg('sdqinfoimg');" onmouseout="hideimg();"/>

<div id="sdqinfo_show_div" style="position:absolute; top:10%; left:300px;z-index:999;display:none;">

    <img id="sdqinfo_getimg" width="400" src=""/>

</div>

function showimg(val){
	 var value=$("#"+val).val();
	 if(value!==""){
		 $("#sdqinfo_getimg").attr("src",+value); 
		 $("#sdqinfo_show_div").show(); 
	  }
}

function hideimg(){
	$("#sdqinfo_getimg").attr("src","");  
	 $("#sdqinfo_show_div").hide();
}
</script>

试了 mouseenter和 mouseleave但是并不能实现不闪烁

于是在id为