React - 下拉菜单悬停关闭太快

【问题标题】：React - dropdown menu hover closes too fastReact - 下拉菜单悬停关闭太快
【发布时间】：2017-01-20 11:20:00
【问题描述】：

我有这个下拉菜单，它在父子选择器之间有一个间隙。这导致它快速关闭。
Fiddle

render() {
    return (
        <div class="dropdown-wrapper">
            <div class="image">Image</div>
            <ul class="dropdown-container">
                <li class="dropdown-list">Nothing</li>
                <li class="dropdown-list">Help</li>
                <li class="dropdown-list">Settings</li>
                <li class="dropdown-list">Logout</li>
            </ul>
        </div>
    );
  }

我尝试了几件事。

使用 react onMoverOver 和 onMouseOut，导致相同的行为
更改 CSS
尝试使用 jquery

我该如何解决这个问题。任何迹象表明我做错了什么？

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

margin-top: 0; on .dropdown-container -- 因为你在.dropdown-container div 上有一个边距，所以一旦你离开.image div，你就不再悬停在它上面......所以下拉菜单关闭。

Fiddle update

如果您想要空间..将其添加到.image 类...

.dropdown-wrapper > .image { padding-bottom: 15px; }

Fiddle Update

【讨论】：

我有一个固定高度和宽度的图像添加填充将无济于事，并将边距结果添加到相同的行为中
那么您需要显示完整且最少的代码来重现问题。
问题是当您将鼠标悬停在一个元素上时您希望菜单出现......但是您将元素（菜单）从悬停元素移得太远。 margin-top:0; 解决了这个问题。您可能需要考虑将菜单包装在另一个没有边距的 div 中，然后在 that 未移动的 div 上触发下拉菜单。