如何在纯 CSS 中显示 :hover 上的所有兄弟姐妹

Question

需要<li>在悬停时选择所有同级元素。在这里尝试接受的答案，但它不起作用。JSFiddle在这里

.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;;
    background-color: #777;
}
.menu li {
    float: none;
    display: none;
}
.menu li a {
    display: block;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    color: #bbb;
}
.menu li a:hover {
    color: #fff;
}
.menu .btn {
        display: block;
        cursor: pointer;
}
.menu li:hover ~ .menu li{/*ON THIS HOVER NOT SHOWING ALL SIBLIING LIs*/
        display: block !important;
}

<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
            <li class="btn"><a>&#9776;</a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/portfolio">Portfolio</a></li>
            <li><a href="/contact">Contact</a>
                
            <ul class="sub-menu">
            <li><a href="/">Sub Menu</a></li>
            <li><a href="/portfolio">Sub Menu</a></li>
            </ul>
                
            </li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->

Answer 1

你的问题是选择器：

.menu li:hover ~ .menu li

隐藏元素不能悬停，这意味着它li:hover永远不会匹配元素。此外，通用兄弟组合器试图找到（后续）兄弟<li>元素，这些元素是从兄弟.menu元素下降的元素。不匹配页面中的元素。

将其转换为以下选择器：

.menu:hover li ~ li

.menu li:hover ~ .menu li

.menu:hover li ~ li

作品; 也就是说它会 - 因为一般的兄弟组合器 - 只匹配那些<li>具有前面<li>兄弟的元素，这意味着它会，并且可以，永远不会显示第一个 <li>.

所以，相反，我建议使用：

.menu:hover li

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  ;
  background-color: #777;
}
.menu li {
  float: none;
  display: none;
}
.menu li a {
  display: block;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  color: #bbb;
}
.menu li a:hover {
  color: #fff;
}
.menu .btn {
  display: block;
  cursor: pointer;
}
.menu:hover li ~ li {
  display: block;
}

<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
  <li class="btn"><a>&#9776;</a>
  </li>
  <li><a href="/">Home</a>
  </li>
  <li><a href="/portfolio">Portfolio</a>
  </li>
  <li><a href="/contact">Contact</a>

    <ul class="sub-menu">
      <li><a href="/">Sub Menu</a>
      </li>
      <li><a href="/portfolio">Sub Menu</a>
      </li>
    </ul>

  </li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->