用javascript实现onmouseover

我想div a和div b在鼠标位于div b上方时切换位置，然后在鼠标离开div a时切换回来。但它的超级灵巧，即使鼠标还并没有离开diva，它也会切换。当鼠标仍在diva中时，如何让它不运行navMouseOut，以及它为什么这样做。请测试代码，看看有什么问题

document.getElementByIdb.onmouseover=函数{ 导航鼠标器 }; document.getElementByIda.onmouseout=函数{ 纳夫穆塞特 }; 功能导航鼠标器{ document.getElementByIda.style=top:50%；； document.getElementByIdb.style=top:40%； } 函数navMouseOut{ document.getElementByIda.style=top:40%；； document.getElementByIdb.style=top:50%；； } a{ 位置：固定； 最高：40%； 左：20%； 背景色：红色； } b{ 位置：固定； 最高：50%； 左：20%； 背景颜色：浅蓝色； } 内容a

内容b

---

使用onmouseenter而不是onmouseover

document.getElementById("b").onmouseenter = function() {
navMouseOver()
};

document.getElementById("a").onmouseout = function() {
navMouseOut()
};

---

我认为问题在于传播，让我们看看onmouseout的这个函数，即使您将鼠标放在p元素之外，但仍然在DIV中，onmouseout仍将执行

您可以这样编写html：

<div id="a">
  content a
</div>
<div id="b">
  content b...
</div>

---

或者使用StopperPagation或cancelBubble

问题在于，当元素切换位置时，mouseover和mouseenter事件将作为新放置在鼠标上的元素激发。为了防止出现这种情况，可以使用一个将true切换为false的标志来决定是否运行重新定位代码

var target1=document.getElementByIdmouseoverTarget1； var切换=错误； var inStartingPosition=true； target1.addEventListenermouseover，函数{ 如果！切换{ 切换=真； target1.style.top=安装位置？50px:0px； target2.style.top=安装位置？-50px:0px； inStartingPosition=inStartingPosition？假：真； console.Logmouse覆盖目标1； 设置超时=>{ 切换=错误； }, 100; } }; var target2=document.getElementByIdmouseoverTarget2； target2.addEventListenermouseover，函数{ 如果！切换{ 切换=真； target1.style.top=安装位置？50px:0px； target2.style.top=安装位置？-50px:0px； inStartingPosition=inStartingPosition？假：真； console.Logmouse覆盖目标2； 设置超时=>{ 切换=错误； }, 100; } }; 鼠标指针1，鼠标指针2{ 宽度：50px； 高度：50px； 位置：相对位置； } 鼠标指针1{ 背景色：红色； } 鼠标指针2{ 背景颜色：蓝色； }

---

另外，您不需要匿名函数来包装对其他函数的调用，只需说document.getElementByIdb.onmouseover=navMouseOver；。这里有一个小提琴展示了如何做到这一点：如果您添加一个解释，这个答案将更有帮助。当鼠标位于某个元素上时，mouseover事件会重复激发。-只有当鼠标移动到元素的子元素上时，它才会再次触发。仅仅停留在一个元素上并不会导致它重复激发。但是是的，mouseenter不会冒泡。