js动态创建div层，鼠标悬停显示隐藏div（无闪烁+小三角）

最新推荐文章于 2021-06-03 10:32:48 发布

原创

最新推荐文章于 2021-06-03 10:32:48 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用JavaScript动态创建div并在鼠标悬停时显示隐藏的div，解决了鼠标无法触发显示div以及防止闪烁的问题。通过将显示的div嵌套在悬停div内，避免了鼠标移出导致的闪烁，并添加了小三角形的实现，同时讨论了动态创建div和数据获取的可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博主看到人人微博上鼠标放到头像上显示一个小框框，感觉交互效果灰常好，遂即研究研究，猜测是否利用里css hover伪类，甚至愚蠢滴认为加载页面时已经读出此框框了只是隐藏了而已，而不是悬停时读，于是断了网，发现小框框里的东西读不出来鸟，瞬间被自己弱智打败了，禁了其页面的javascript，发现效果瞬间没了，在确定了是js实现的效果后，就想到了onmouseover和onmouseout事件，于是乎就赶紧写了一个

<div id="divNeedFloat1">悬停一下试试</div>
<div id ="divFloat1" style = "display:none">我出现了</div>
<script>
	document.getElementById("divNeedFloat1").onmouseover = function(){
		var divFloat = document.getElementById("divFloat1")
		divFloat.style.display="block";
		this.onmouseout = function (){
			divFloat.style.display="none";
		}
	}
</script>

，电光火石间，发现鼠标移不到显示出来的div框框上，因为onmouseout事件是绑定到悬停div上，假如绑定到显示出来的div框框上，很明显悬停div便指挥不了小框框了，尼玛，闪烁个不停，额，终于整明白了，原来自己真的如此弱智，明显这个小框框div应该嵌套到悬停div上，这样onmouseout事件不就同时加到小框框div和悬停div了嘛，真是笨到可以啊~

结构变为：

<div id="divNeedFloat1">
悬停一下试试