悬停时显示下拉列表

Question

可能是个愚蠢的问题，但：

我有一个默认隐藏的下拉菜单(ul((不透明度：0(当悬停在同一级别的按钮时，ul将获得不透明度：1。

问题是，当光标离开按钮以选择菜单中的链接时，菜单将消失，因为按钮不再悬停

我在谷歌上搜索的东西都帮不了我，所以我在这里问，提前谢谢。

顺便说一句，我使用了不透明度而不是显示，因为我想要在显示下拉菜单时简单的延迟(动画((转换：不透明度。3轻松进出(

并且我不能在整个父元素上使用悬停(div class＝"dropdown"(，因为ul具有绝对位置(

HTML

<div class="dropdown">
<button class="btn button--langs btn-secondary dropdown-toggle" type="button">
Čeština
</button>
<ul class="dropdown__list">
<li class="dropdown__list__item">
<a href="#" class="dropdown__list__item__link">English</a>
</li>
<li class="dropdown__list__item">
<a href="#" class="dropdown__list__item__link">Española</a>
</li>
<li class="dropdown__list__item">
<a href="#" class="dropdown__list__item__link">Pусский</a>
</li>
</ul>
</div>  

样式

.dropdown
&__list
position: absolute
padding: 0
margin: 0
list-style: none
background-color: $trans-black
transition: opacity .3s ease-in-out
opacity: 0
&__item
&__link
padding: .5rem .75rem
display: block
transition: .5s ease
&:hover
background-color: $black
text-decoration: none
.button--langs:hover + .dropdown__list 
opacity: 1

Answer 1

好的，所以解决方案是将悬停事件也放在列表上。感谢所有回答的人。

Answer 2

我会将鼠标悬停在.download上。不能使用注释中提到的display: none，因为这不会使菜单设置不透明度的动画。因此，我将height: 0px和overflow:hidden添加到.dropdown_list中，并在悬停.deropdown_元素时将高度设置为auto。

为了显示功能，我将SASS更改为CSS。

.dropdown {
--color-black: #121212;
/* ADDED */
display: inline;
}
.dropdown__list {
position: absolute;
padding: 0;
margin: 0;
list-style: none;
background-color: $trans-black;
transition: opacity .3s ease-in-out;
opacity: 0;
/* ADDED */
height: 0px;
overflow: hidden;
}
/* CHANGED */
.dropdown:hover > .dropdown__list {
opacity: 1;
/* ADDED */
height: auto;
}
.dropdown__list__item__link {
padding: .5rem .75rem;
display: block;
transition: .5s ease;
}
.dropdown__list__item__link:hover {
background-color: var(--color-black);
text-decoration: none;
}

<div class="dropdown">
<button class="btn button--langs btn-secondary dropdown-toggle" type="button">
Čeština
</button>
<ul class="dropdown__list">
<li class="dropdown__list__item">
<a href="#" class="dropdown__list__item__link">English</a>
</li>
<li class="dropdown__list__item">
<a href="#" class="dropdown__list__item__link">Española</a>
</li>
<li class="dropdown__list__item">
<a href="#" class="dropdown__list__item__link">Pусский</a>
</li>
</ul>
</div>

Answer 3

使用CSS中的display属性设置display: none;，悬停时设置display: block

Answer 4

尝试将按钮和下拉列表放在一个div中，并在悬停该div时显示下拉列表。

如果你能发布你的示例代码和期望的输出，它可以得到更好的回答。