将鼠标悬停在同级

Question

可见制作下拉元素我有结构类似于下面的代码，它的HTML代码，我可以修改（也没有添加JavaScript的，除非可以混进风格标签）的下拉菜单。除了“开启”按钮之外的所有按钮状态按钮都应该是不可见的，直到“开启”按钮被暂停。此外，搜索框应始终保持可见状态，不要触发悬停事件，因为只要有人将鼠标悬停在搜索框上，它就会将其向下移动 - >坏的UX

我成功地在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

不幸的是你的问题是不可解的纯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>

Answer 2

这是棘手的，但如果我理解正确的问题，我相当肯定我已经破解它。

该解决方案使用的.search-container本身可以隐藏在两个.search-buttons：（即在第二.search-button顶部）

• 一个transform: translateY()移位的.search-container向上
• 不透明padding-bottom上.search-container隐藏第三.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>