Question

我设法使用CSS和HTML创建一个下拉菜单。鼠标悬停时会出现下拉菜单。

我希望下拉菜单在鼠标悬停后1秒消失。为此，我尝试添加

transition: display 1s;

进入.dropdown:hover .dropdown_list, .dropdown_list:hover，但它没有做任何事情。

我的代码：

* {
    margin: 0;
    padding: 0;
}
header {
    position: fixed;
    height: 35px;
    width: 100%;
    background: black;
}
.top-container {
    margin-top: 7px;
}
/* Code for drop-down list */
 .dropdown {
    margin-left: 100px;
    display: inline-block;
    color: #FFF;
}
.dropdown:hover {
    text-shadow:0px 4px 7px white;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
    display: block;
    top:100%;
    
    transition: display 1s; /* Doesn't work */
}
.dropdown_list {
    list-style: none;
    display: none;
    position: absolute;
    color: red;
    width: 100px;
}
.dropdown_list li {
    background: yellow;
}
li {
    border: 1px solid black;
}

<body>
    <header>
        <div class="top-container">
            <div class="dropdown">Dropdown &#10097;
                <ul class="dropdown_list">
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                </ul>
            </div>
        </div>
    </header>
</body>

如何将鼠标悬停后的下拉菜单暂停一秒钟？这可能没有任何jQuery或Javascript吗？

Answer 1

转换仅适用于具有数值的属性。显示使用离散值，因此无法接收任何过渡效果。

只需使用CSS，您就可以使用top或类似的属性来隐藏＆＃39;下拉菜单（jsfiddle）。

.dropdown:hover .dropdown_list,
.dropdown_list:hover {
    top: 100%;
    transition: none;
}
.dropdown_list {
    top: -10000%;
    display: block;
    transition: top 1s step-end;
}

下拉菜单中的延迟消失

1 个答案: