Question

我有一个类似下面代码的下拉菜单，我可以修改其HTML代码（除非可以将其隐藏到样式标记中，否则不添加javascript）。除“on”按钮外的所有按钮状态按钮都应该是不可见的，直到“on”按钮悬停在上面。此外，搜索框应始终保持可见状态，并且不会触发悬停事件，因为只要有人将鼠标悬停在其上，它就会将其移动 - ＆gt;糟糕的用户体验

我在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的顶部）
padding-bottom上的不透明.search-container隐藏在其下方的第三个.search-button，当它处于较高位置时

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

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

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

＆＃13;

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';
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

通过将鼠标悬停在兄弟上来显示下拉元素

2 个答案: