CSS: 有没有办法在鼠标离开一瞬间时不失去悬停?
CSS: Is there a way to not lose hover, if the mouse goes off for a split-second?
我正在创建一个 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;
}
}
}
}
您可以尝试在每个按钮周围放置一些透明填充物,然后在 div 丢失 hover
时菜单消失。
或者将菜单打开时出现的按钮放入它们自己的 div 中,这样当鼠标悬停在 div 上时,菜单就会保持不变。
就像我之前说的:最简单的方法是将伪元素添加到下拉列表中,这将在按钮和下拉列表之间使用 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>
我正在创建一个 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;
}
}
}
}
您可以尝试在每个按钮周围放置一些透明填充物,然后在 div 丢失 hover
时菜单消失。
或者将菜单打开时出现的按钮放入它们自己的 div 中,这样当鼠标悬停在 div 上时,菜单就会保持不变。
就像我之前说的:最简单的方法是将伪元素添加到下拉列表中,这将在按钮和下拉列表之间使用 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>