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

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：

• 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>

Answer 2

不幸的是，纯 CSS 无法解决您的问题，因为一般的同级选择器只查找 指定元素之后的元素。 See MDN 了解有关选择兄弟姐妹的更多信息。

您需要previous sibling selecter，但它不存在。如果您有可能添加它，唯一的选择是使用 JavaScript。这是一个工作示例：

var links = document.getElementsByClassName('status-button');
for (i=0; i<links.length; i++) {
  links[i].addEventListener('mouseover', showDropDown);
  links[i].addEventListener('mouseout', hideDropDown);
}
function showDropDown() {
  for (i=0; i<links.length; i++) {
    links[i].style.display = 'block';
  }
}
function hideDropDown() {
  for (i=1; i<links.length; i++) {
    links[i].style.display = 'none';
  }
}

.status-menu .status-button:not(.on) {
  display: none;
}

<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>
</div>