Question

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

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

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

我用Google搜索没有任何帮助，所以我在这里问，谢谢。

顺便说一句，我使用不透明度而不是显示，因为我希望在显示下拉菜单时进行简单的延迟（动画处理）（过渡：不透明度.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

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

如果您可以发布示例代码和预期的输出，则可以得到更好的回答。

Answer 2

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

Answer 3

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

Answer 4

我将鼠标悬停在 .dropdown 上。您不能使用注释中提到的display: none，因为那样将使菜单没有动画效果。为此，我在您的 .dropdown__list 中添加了height: 0px和overflow:hidden，并在悬停 .dropdown 元素时将高度设置为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>

悬停时显示下拉菜单

4 个答案: