如果父元素有边框，当鼠标同时退出父元素和子元素时，如何避免来自父元素的鼠标悬停事件

How to avoid the mouseover event from the parent element when the mouse is exiting both parent and child if the parent has a border

本文关键字：元素 鼠标 何避免 事件 悬停 如果 退出 边框      更新时间：2023-09-26

编辑:我想要的是嵌套的div不被移动，当鼠标离开它和父div。我很确定它是目前移动，因为边界以某种方式扩展父进一步超出嵌套的div。我想保持边界。

就像有人曾经说过的，一个演示胜过1000个单词。

我有一个div嵌套在div

<div class='parent'>
    <div>Check me out</div>
</div>

有一些样式

.parent {
    width: 100%;
    border: 1px solid black;
}
.parent div {
    display: inline-block;
    position: relative
}

和一些附带的Javascript

var navBar = document.querySelector('div.parent');
var navItems = navBar.querySelector('div');
var moveNav = false;
var overItems = false;
navBar.addEventListener('mouseout', function() { moveNav = false; });
navItems.addEventListener('mouseover', function() { overItems = true; });
navItems.addEventListener('mouseout', function() { overItems = false; });
navBar.addEventListener('mouseover', function() { moveNav = !overItems && true; });
navBar.addEventListener('mousemove', moveToMouse);
function moveToMouse(e) {
    if(!moveNav)
        return;
    navItems.style.left = (e.offsetX - Math.floor((e.offsetX+navItems.offsetWidth)/navBar.offsetWidth) * (e.offsetX + navItems.offsetWidth - navBar.offsetWidth + 10)) + 'px'
}

目的是当鼠标在.parentdiv内时，将子div的一部分保留在鼠标下方。*

我想知道的是如何使子div不被移动，因为鼠标退出.parentdiv?

换句话说，我想让它像小提琴一样。小提琴之间的区别是，第一个在.parent周围有边界，第二个是无边界的。

当然，我已经注意到，孩子div到处乱跳，而不是平稳移动。关于如何避免这种情况的建议是受欢迎的，但不是期望的。

*如果有更好的方法，请指出来**

**不要说"use jQuery"

在带边框的div示例中，我使用mouseenter事件而不是mouseover，它似乎是按您想要的方式工作。

navBar.addEventListener('mouseenter', moveToMouse);
相关文章：