Javascript 在mouseout上包含输入消隐的Div

我想让一个div在鼠标位于div的边界时保持可见，代码一直工作到它悬停在输入上。我想在MouseOver上显示一个注册表单，当登录完成并且鼠标离开时，div将不再可见

HTML

CSS

---

我只会使用CSS来实现这一点：

#sign-up-form {
    display: none;
}

.members:hover #sign-up-form {
    display: block;
}

---

此示例使用mouseover和mouseout事件侦听器以及一个函数，该函数将在更改signUpForm元素的显示之前侦听所有子元素

function outVis(event) {
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    signUpForm.style.display = 'none';
}

---

您是否尝试过CSS“hover”选择器？虽然不完全相同，但我会选择在

div.members

上使用

：hover

。演示不应该用JS。虽然我同意它应该用css来完成，但这并不是一个解决方案，只是一个想法，真正的问题是css中成员块和表单之间的差距。您将遇到与OPs原始代码相同的问题，而不需要对定位进行轻微调整。这就是css的情况。您将鼠标悬停在“注册”按钮上，表单显示，然后您移动到填充表单，鼠标悬停消失了！我可以看到@EtienneMiret，因为有一个像素的间隙。如果

top:32px减少了一个像素，它就可以正常工作了。”@epascarello。我没有注意到表单是绝对定位的，直到你提到它。这就是这个问题的全部内容。我的错。
#signUp{
    position: relative;
    background-color: red;
    color: white;
    padding: 6px;
}

#sign-up-form{
    display: none;
    position:absolute;
    top: 32px;
    left: 8px;
    background-color: rgba(0,83,159,0.6);
    padding: 15px;
}

#sign-up-form {
    display: none;
}

.members:hover #sign-up-form {
    display: block;
}

function outVis(event) {
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    signUpForm.style.display = 'none';
}