CSS: 有没有办法在鼠标离开一瞬间时不失去悬停？

Question

我正在创建一个 megamenu（以 hover 开头），如果鼠标在空 space 上移动一瞬间，则不悬停会很好。顶部栏按钮之间有一点 space，将鼠标移动到空区域将停止悬停并完全隐藏 megamenu。

图像中的白色方块是按钮区域。它和浅蓝色下拉区域都显示带有 hover 的下拉列表。但是，将这些区域留在一瞬间（箭头）会导致悬停丢失并且菜单将隐藏。

如何让菜单重新聚焦而不是隐藏？我试过使用 transition-delay，但还没有成功，因为菜单适用于 display: flex | none。我使用 display，因为 megamenu 中有四个单独的下拉菜单，但是我应该使用更好的方法吗？

我正在使用 Liferay 7.3.2，如果它有任何不同的话。

编辑：我的一些代码：

<ul id="megamenu-top">
    <li class="megamenu-top-item">
        <button class="megamenu-top-button">
            Top button
        </button>
        <ul class="megamenu-dropdown">
            <li class="megamenu-dropdown-item">
                <a href="/link">
                    Link
                </a>
            </li>
        </ul>
    </li>
</ul>

#megamenu-top {
    .megamenu-top-item {
        display: flex;
        width: 20%;
        height: 5rem;
        margin: auto;
        padding: 0 0.5rem;

        .megamenu-top-button {
            width: 100%;
            padding: 5px;
            border-width: 5px 0;
            margin: 1rem auto;
        }

        .megamenu-dropdown {
            display: none;
            width: 100%;
            position: absolute;
            padding: 5rem 5% 7rem;
            margin-top: 5rem;

            .megamenu-dropdown-item {
                width: 20%;
                margin: 1rem 6.66%;
                display: flex;

                a {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    padding: 1rem;
                }
            }
        }

        &:hover, &:focus-within, &:active {
            .megamenu-dropdown {
                display: flex;
            }
        }
    }
}

Answer 1

您可以尝试在每个按钮周围放置一些透明填充物，然后在 div 丢失 hover 时菜单消失。

或者将菜单打开时出现的按钮放入它们自己的 div 中，这样当鼠标悬停在 div 上时，菜单就会保持不变。

Answer 2

就像我之前说的：最简单的方法是将伪元素添加到下拉列表中，这将在按钮和下拉列表之间使用 space。因此，当您将鼠标从按钮移动到下拉菜单时，悬停不会丢失。我添加了背景颜色，这样您就可以看到它是如何工作的，只需根据您的真实偏移量调整大小

#megamenu-top .megamenu-top-item {
  display: flex;
  width: 20%;
  height: 5rem;
  margin: auto;
  padding: 0 0.5rem;
}
#megamenu-top .megamenu-top-item .megamenu-top-button {
  width: 100%;
  padding: 5px;
  border-width: 5px 0;
  margin: 1rem auto;
}
#megamenu-top .megamenu-top-item .megamenu-dropdown {
  display: none;
  width: 100%;
  position: absolute;
  padding: 5rem 5% 7rem;
  margin-top: 5rem;
}
#megamenu-top .megamenu-top-item .megamenu-dropdown .megamenu-dropdown-item {
  width: 20%;
  margin: 1rem 6.66%;
  display: flex;
}
#megamenu-top .megamenu-top-item .megamenu-dropdown .megamenu-dropdown-item a {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem;
}
#megamenu-top .megamenu-top-item:hover .megamenu-dropdown, #megamenu-top .megamenu-top-item:focus-within .megamenu-dropdown, #megamenu-top .megamenu-top-item:active .megamenu-dropdown {
  display: flex;
}


/* Added code */
#megamenu-top .megamenu-top-item .megamenu-dropdown {
  background-color: #cecece;
}

/* For demo purposes */
#megamenu-top .megamenu-top-item .megamenu-dropdown {
  margin-top: 7rem;
}

/* Pseudo for dropdown */
#megamenu-top .megamenu-top-item .megamenu-dropdown::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 100%;
  height: 2rem;
  width: 100%;
  background-color: red;
}

<ul id="megamenu-top">
    <li class="megamenu-top-item">
        <button class="megamenu-top-button">
            Top button
        </button>
        <ul class="megamenu-dropdown">
            <li class="megamenu-dropdown-item">
                <a href="/link">
                    Link
                </a>
            </li>
        </ul>
    </li>
</ul>

CSS: 有没有办法在鼠标离开一瞬间时不失去悬停？

CSS: Is there a way to not lose hover, if the mouse goes off for a split-second?

css

hover

liferay-7

megamenu

liferay-7.3