html - 通过将鼠标悬停在同级上使下拉元素可见

Question

我有一个下拉菜单，其结构类似于下面的代码，我可以修改其 HTML 代码(也不会添加 javascript，除非可以将其潜入样式标签中)。除了“on”按钮之外的所有按钮状态按钮都应该是不可见的，直到“on”按钮被悬停。此外，搜索框应始终保持可见并且不会触发悬停事件，因为一旦有人将其悬停在上面，它就会向下移动 -> 糟糕的用户体验

我在 CSS 中成功地实现了这一点，但是，正如您所看到的，当您尝试将鼠标悬停在下拉内容上时，它们开始一个接一个地消失。我该如何解决？

.status-menu .status-button.on {
    display: block;
    clear: both;
}

.status-menu .status-button.on:hover ~ .status-button {
    display: block;
}

.status-menu .status-button {
    display: none;
    clear: both;
}

.status-menu .status-button:hover ~ .status-button {
  display: block;
}

<div class="status-menu">
    <a class="status-button on">...</a>
    <a class="status-button">...</a>
    <a class="status-button">...</a>
    <div class="search-container">
        <div id="search-box"><input type="text" value=""></div>
        <a id="search-button">
            <i class="fa fa-search"></i>
        </a>
    </div>

Answer 1

这很棘手，但如果我正确理解了这个问题，我相当确定我已经破解了它。

此解决方案使用 .search-container 本身来隐藏两个 .search-buttons:

• a transform: translateY() 将 .search-container 向上移动(即在第二个 .search-button 的顶部) )
• .search-container 上的一个不透明的 padding-bottom 隐藏了它下面的第三个 .search-button，当它位于更高的职位

.status-menu {
    display: inline-block;
    clear: both;
}

.status-button {
    display: block;
    cursor: pointer;
}

.search-container {
    padding-bottom: 20px;
    background-color: rgb(255, 255, 255);
    transform: translateY(-40px);
}

.status-button:hover ~ .search-container {
    transform: translateY(0);
}

<div class="status-menu">
    <a class="status-button on">Status Button On</a>
    <a class="status-button">Status Button</a>
    <a class="status-button">Status Button</a>
    <div class="search-container">
        <div id="search-box"><input type="text" value=""></div>
        <a id="search-button">
            <i class="fa fa-search"></i>
        </a>
    </div>